Create PDF file from iframe

Question

I want to save a PDF file which contains an IFrame content. I am using jsPDF for it. When I hit the button that calls the function the script creates an empty PDF page.

The content of the frame looks like: 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's 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 someone know what is wrong and how I can fix this?

Answer 1

To print html from iframe, you need to get content from iframe. Source code to get 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 replace:

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

with

source = getFrameContents();

or simple with jQuery:

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

However, there is still issue about CORS (Cross-Origin Resource Sharing). To solve it, you can create web server and put you html code and iframe src in there and see how it work.

Answer 2

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

Plus, in the source code is the following notation before the jsPDFAPI.fromHTML function that you are calling. Please see the last point re tables which 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've been around the block and I don't get the feeling that jsPDF is very robust - you may want to cast your net wider and find another plugin. Just my opinion.