javascript - Using jsPDF to create a PDF from an iframe - Stack Overflow

admin管理员组

文章数量:1277886

Ok, I have scoured the internet for a solution to this but I can't find anything. I am trying to find a way to save the contents of an iframe as a PDF. I am always running into an issue where the PDF is just blank. It seems that jsPDF is the only way. I'm kind of wondering if the reason this isn't working is because of the fromHTML() function. I'm not sure. If any of you have figured out a solution I would be very appreciative!!

Here is some sample code you can try in an HTML file:

<script src=".3.2/jspdf.min.js"></script>
<script src=".3.1/jquery.min.js"></script>
<script type="text/javascript"></script>
<script>
    function demoFromHTML() {
    var pdf = new jsPDF('p', 'pt', 'letter');
    source = $('#frame')[0];
    specialElementHandlers = {
        '#bypassme': function (element, renderer) {
            return true
        }
    };
    margins = {
        top: 80,
        bottom: 60,
        left: 40,
        width: 522
    };
    pdf.fromHTML(
    source,
    margins.left,
    margins.top, {
        'width': margins.width,
        'elementHandlers': specialElementHandlers
    },

    function (dispose) {
        pdf.save('Test.pdf');
    }, margins);
}
</script>
<button onclick="javascript:demoFromHTML();">PDF</button>
<iframe id="frame" src='' style="width: 75%;height: 75%;"></iframe>

Ok, I have scoured the internet for a solution to this but I can't find anything. I am trying to find a way to save the contents of an iframe as a PDF. I am always running into an issue where the PDF is just blank. It seems that jsPDF is the only way. I'm kind of wondering if the reason this isn't working is because of the fromHTML() function. I'm not sure. If any of you have figured out a solution I would be very appreciative!!

Here is some sample code you can try in an HTML file:

<script src="https://cdnjs.cloudflare./ajax/libs/jspdf/1.3.2/jspdf.min.js"></script>
<script src="https://ajax.googleapis./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript"></script>
<script>
    function demoFromHTML() {
    var pdf = new jsPDF('p', 'pt', 'letter');
    source = $('#frame')[0];
    specialElementHandlers = {
        '#bypassme': function (element, renderer) {
            return true
        }
    };
    margins = {
        top: 80,
        bottom: 60,
        left: 40,
        width: 522
    };
    pdf.fromHTML(
    source,
    margins.left,
    margins.top, {
        'width': margins.width,
        'elementHandlers': specialElementHandlers
    },

    function (dispose) {
        pdf.save('Test.pdf');
    }, margins);
}
</script>
<button onclick="javascript:demoFromHTML();">PDF</button>
<iframe id="frame" src='https://wikipedia/wiki/Main_Page' style="width: 75%;height: 75%;"></iframe>

• javascript
• jquery
• html
• jspdf

Share Improve this question Follow asked Nov 1, 2018 at 22:09 ColtonColton 6111 gold badge22 silver badges55 bronze badges 3

• Ever figure this out? – Gupta Commented Dec 27, 2022 at 18:58
• No, unfortunately not – Colton Commented Dec 28, 2022 at 20:38
• Should look at html2pdf. Works fine for me. Just works with a few lines of code. Seems they rewrote the code and it works pretty well for the limited testing I did. – Gupta Commented Dec 29, 2022 at 18:03

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 6

Go through this article : Convert HTML/CSS Content to a Sleek Multiple Page PDF File Using jsPDF JavaScript library. The provided script allows you to convert any HTML element to PDF. I modified the generate() function slightly so that it takes any HTML element id name and export it as PDF file:

generate = function(doc)
{
	var pdf = new jsPDF('p', 'pt', 'a4');
	pdf.setFontSize(18);
	pdf.fromHTML(document.getElementById(doc), 
		margins.left, // x coord
		margins.top,
		{
			// y coord
			width: margins.width// max width of content on PDF
		},function(dispose) {
			headerFooterFormatting(pdf, pdf.internal.getNumberOfPages());
		}, 
		margins);
		
	var iframe = document.createElement('iframe');
	iframe.setAttribute('style','position:absolute;right:0; top:0; bottom:0; height:100%; width:650px; padding:20px;');
	document.body.appendChild(iframe);
	
	iframe.src = pdf.output('datauristring');
};

It works 100% on Chrome but Im not sure about other browsers.

Try this solution.

<button id="generatePDF">Generate PDF</button>

<script src="https://cdnjs.cloudflare./ajax/libs/jspdf/1.3.2/jspdf.min.js"></script>
<script src="https://ajax.googleapis./ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>
$( '#generatePDF' ).click( function()
{
    var pdf = new jsPDF('a4');
    pdf.text("Some text inside PDF", 10, 10);

    $( '#docpdf' ).attr('src', pdf.output('datauristring'));
});

</script>

<iframe id="docpdf" style="background-color:#EEE; height:400px;">
    PDF goes here 
</iframe>

A wild guess here but I think this has to do with the fact that Iframes from other domains are protected. Read into 'cross-domain policy', if it's the cause I'm quite sure you can't work around it very easy.

try

    var source = window.document.getElementsByTagName(tagName)[0];

instead of

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

本文标签： javascriptUsing jsPDF to create a PDF from an iframeStack Overflow