从iframe创建PDF文件
我想保存一个包含IFrame内容的PDF文件。 我正在使用jsPDF。 当我点击调用该函数的按钮时，该脚本创建一个空的PDF页面。
该框架的内容如下所示：https：//jsfiddle.net/ss6780qn/
我正在使用以下脚本：
<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');
}
有人知道什么是错的，我该如何解决这个问题？
对于这个问题，Github看起来像是一个开放案例，自2015年以来仍然开放。请参阅https://github.com/MrRio/jsPDF/issues/496。 也许没有解决办法。
另外，在源代码中，您正在调用jsPDFAPI.fromHTML函数之前的以下表示法。 请参阅可能影响您工作的最后一个重点表。
* 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.
此外 - 我试图在这里和jsfiddle中设置一个工作片段，但无法让jsPDF.fromHTML正常工作。 我不是一个jsPDF专家，但我一直在围绕着这个块，我没有感觉到jsPDF非常强大 - 您可能想要扩大网络范围并找到另一个插件。 只是我的观点。
要从iframe打印html，您需要从iframe获取内容。 从iframe获取内容的源代码（我从中获得）：
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
}
所以你替换：
source = $('#frame')[0]
同
source = getFrameContents();
或简单的jQuery：
source = $("#frame").contents().find('body')[0];
但是，关于CORS（跨源资源共享）仍然存在问题。 为了解决这个问题，你可以创建Web服务器，并把你的html代码和iframe src放在那里，看看它是如何工作的。
链接地址: http://www.djcxy.com/p/39725.html