使用 jsPDF 从 iframe 创建 PDF [英] Using jsPDF to create a PDF from an iframe

问题描述

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

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!!

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

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

<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>

推荐答案

阅读这篇文章:使用 jsPDF JavaScript 库将 HTML/CSS 内容转换为光滑的多页 PDF 文件.提供的脚本允许您将任何 HTML 元素转换为 PDF.我稍微修改了 generate() 函数，以便它接受任何 HTML 元素 ID 名称并将其导出为 PDF 文件:

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

它在 Chrome 上 100% 工作，但我不确定其他浏览器.

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

这篇关于使用 jsPDF 从 iframe 创建 PDF的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！