將JSPDF生成的pdf放入iframe

Question

我有以下代碼使用https://github.com/MrRio/jsPDF庫生成pdf：

 var generatePdfFromHtml = function(pdf, html, callback) { console.log("Generating Pdf"); pdf.html(html, { 'callback': function(pdf) { if (callback && typeof callback === 'function') { console.log("Offering Pdf as callback"); callback(pdf); } } }); } $(document).ready(function() { /** * @var {jsPDF} pdf */ var pdf = new jsPDF('p', 'pt', 'a4'); $("#myform").on('submit', function(e) { e.preventDefault(); var val = $("#inputData").val(); /* Dummy Html to emulate the situation I am */ val = "<b>" + val + "</b>"; generatePdfFromHtml(pdf, val, function(returnedPDF) { var blob = pdfFromCallback.output('blob'); console.log(blob) /* Write Pdf into #display Iframe */ }); }); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js" integrity="sha384-NaWTHo/8YCBYJ59830LTz/P4aQZK1sS0SneOgAvhsIl3zBu8r9RevNg5lHCHAuQ/" crossorigin="anonymous"></script> <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.js"></script> <form id="myform"> <input id="inputData" name="metallica" placeholder="Enter a metallica song"><button type="submit">Enter Sandman</button> </form> <iframe id="display"></iframe> 

我想要的是將生成的blob pdf放入id為#display的iframe中你知道怎么做嗎？

我還發現Mozilla已經使pdf.js允許我們在不支持的情況下渲染pdf因此如果不支持pdf渲染我如何使用pdf.js來渲染它？

Answer 1

查看我編輯的代碼，以便將pdf呈現為iframe ：

 var generatePdfFromHtml = function(pdf, html, callback) { console.log("Generating Pdf"); pdf.html(html, { 'callback': function(pdf) { if (callback && typeof callback === 'function') { console.log("Offering Pdf as callback"); callback(pdf); } } }); } $(document).ready(function() { /** * @var {jsPDF} pdf */ var pdf = new jsPDF('p', 'pt', 'a4'); $("#myform").on('submit', function(e) { e.preventDefault(); var val = $("#inputData").val(); /* Dummy Html to emulate the situation I am */ val = "<b>" + val + "</b>"; generatePdfFromHtml(pdf, val, function(returnedPDF) { console.log("Generated Pdf"); var blob = pdfFromCallback.output('blob'); /* Write Pdf into #display Iframe */ var blob_url = URL.createObjectURL(blob); var iframeElementContainer = document.getElementById('display'); iframeElementContainer.src=blob_url; }); }); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js" integrity="sha384-NaWTHo/8YCBYJ59830LTz/P4aQZK1sS0SneOgAvhsIl3zBu8r9RevNg5lHCHAuQ/" crossorigin="anonymous"></script> <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.js"></script> <form id="myform"> <input id="inputData" name="metallica" placeholder="Enter a metallica song"><button type="submit">Enter Sandman</button> </form> <iframe id="display" style="width:100%; height:100%; overflow:scroll;"></iframe> 

正如您所看到的，以下代碼完成了這項工作：

 var blob_url = URL.createObjectURL(blob);
 var iframeElementContainer = document.getElementById('display');
 iframeElementContainer.src=blob_url;

換句話說，我們實際上生成了一個url，我們將其設置為iframe的src。 生成url的臟工作是URL.createObjectURL函數。