使用 jsPDF 从 iframe 创建 PDF

Question

好的，我已经在互联网上搜索了解决此问题的方法，但我找不到任何东西。我正在尝试找到一种将 iframe 的内容保存为 PDF 的方法。我总是遇到 PDF 只是空白的问题。似乎 jsPDF 是唯一的方法。我有点想知道这不起作用的原因是否是因为 fromHTML() 函数。我不确定。如果你们中的任何人找到了解决方案，我将非常感激！

下面是一些您可以在 HTML 文件中尝试的示例代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script>
<script src="https://ajax.googleapis.com/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.org/wiki/Main_Page' style="width: 75%;height: 75%;"></iframe>

Answer 1

阅读这篇文章：Convert HTML/CSS Content to a Sleek Multiple Page PDF File Using jsPDF JavaScript library。提供的脚本允许您将任何 HTML 元素转换为 PDF。我稍微修改了generate() 函数，使它接受任何HTML 元素id 名称并将其导出为PDF 文件：

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');
};

它在 Chrome 上可以 100% 运行，但我不确定其他浏览器。

Answer 2

试试这个解决方案。

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script>
<script src="https://ajax.googleapis.com/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>

Answer 3

这是一个疯狂的猜测，但我认为这与来自其他域的 iframe 受到保护这一事实有关。 阅读“跨域策略”，如果这是原因，我很确定你不能很容易地解决它。

Answer 4

试试

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

而不是

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