Place a JSPDF-generated pdf into an iframe

Question

I have the following piece of code that generates a pdf using the https://github.com/MrRio/jsPDF library:

 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> 

What I want is to place the generated blob pdf into the iframe having id #display do you know how to do that?

I also found that Mozilla has made the pdf.js allowing us to renbder pdf when not supported thus in case that pdf rendering not supported how I can use pdf.js to render it?

Answer 1

Look at this code I edited in order to render the pdf into an 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> 

As you can see the following piece of code does the job:

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

In other words we actually generate a url and we set it as the iframe's src. The dirty job of generating the url is the URL.createObjectURL function.