Create PDF file from iframe

Question

I want to save a PDF file containing the contents of an IFrame. I am using jsPDF for this. When I click the button that calls the function, the script creates an empty PDF page.

The content of the frame looks like this: https://jsfiddle.net/ss6780qn/

I am using the following script:

<script src="../jspdf/plugins/standard_fonts_metrics.js"></script> <script type="text/javascript"> function toPDF(){ var pdf = new jsPDF('p', 'in', 'letter'); // source can be HTML-formatted string, or a reference // to an actual DOM element from which the text will be scraped. source = $('#frame')[0] // we support special element handlers. Register them with jQuery-style // ID selector for either ID or node name. ("#iAmID", "div", "span" etc.) // There is no support for any other type of selectors // (class, of compound) at this time. specialElementHandlers = { // element with id of "bypass" - jQuery style selector 'div': function(element, renderer){ // true = "handled elsewhere, bypass text extraction" return true } } // all coords and widths are in jsPDF instance declared units // 'inches' in this case pdf.fromHTML( source // HTML string or DOM elem ref. , 0.5 // x coord , 0.5 // y coord , { 'width':7.5 // max width of content on PDF ,'elementHandlers': specialElementHandlers } ) pdf.save('Test.pdf'); } 

Does anyone know what is wrong and how can I fix it?

Answer 1

Looks like an open case on Github for this same problem, still open since 2015. See https://github.com/MrRio/jsPDF/issues/496 . Perhaps there is no solution.

In addition, in the source code there is the following entry before the jsPDFAPI.fromHTML function that you call. Please review the latest tables that may affect your work.

 * Converts HTML-formatted text into formatted PDF text. * * Notes: * 2012-07-18 * Plugin relies on having browser, DOM around. The HTML is pushed into dom and traversed. * Plugin relies on jQuery for CSS extraction. * Targeting HTML output from Markdown templating, which is a very simple * markup - div, span, em, strong, p. No br-based paragraph separation supported explicitly (but still may work.) * Images, tables are NOT supported. 

Also, I tried to set up a working snippet here and in jsfiddle, but could not get jsPDF.fromHTML to work. I am not a jsPDF expert, but I have been around the block and I don’t feel that jsPDF is very reliable - you can expand your network and find another plugin. Just my opinion.

Answer 2

To print html from iframe, you need to get content from iframe. Source code for getting content from iframe (I got from this ):

 function getFrameContents() { var iFrame = document.getElementById('frame'); var iFrameBody; if (iFrame.contentDocument) { // FF iFrameBody = iFrame.contentDocument.getElementsByTagName('body')[0]; } else if (iFrame.contentWindow) { // IE iFrameBody = iFrame.contentWindow.document.getElementsByTagName('body')[0]; } //alert(iFrameBody.innerHTML); return iFrameBody.innerHTML } 

So you are replacing:

 source = $('#frame')[0] 

from

 source = getFrameContents(); 

or just with jQuery:

 source = $("#frame").contents().find('body')[0]; 

However, there is still a problem with CORS (Cross-Origin Resource Sharing). To solve this problem, you can create a web server and place the html code and iframe src there and see how it works.