jsPDFaddHTML获取滚动元素的全部内容

jsPDF addHTML get full contents of scrolling element

本文关键字：全部 元素 获取 滚动 jsPDFaddHTML      更新时间：2023-09-26

如何让jsPDF从一个设置了溢出的元素中创建一个图像/pdf，使其具有滚动条。以下示例粘贴到addHTML"播放"页面(http://mrrio.github.io/jsPDF/)将只为显示的div部分生成pdf，即使我选择"中间"div：

var outer = document.createElement('div');
outer.style.height = "100px";
outer.style.overflow = "scroll";
var middle = document.createElement('div');
for ( var i=0; i<35;i++ ) {
    var inner = document.createElement('div');
    inner.style.border = "thick solid #0000ff";
    inner.style.padding = "10px";
    middle.appendChild(inner);
}
outer.appendChild(middle);
document.body.appendChild(outer);
var pdf = new jsPDF('p','pt','a4');
pdf.addHTML(outer,function() {
    var string = pdf.output('datauristring');
    $('.preview-pane').attr('src', string);
});

（基本上，这是创建一个带有滚动条的div，在里面添加一个div，然后在中间的一个里面添加一大堆div。有足够的div可以滚动到屏幕外，所以pdf不会拾取它们。我想过弹出一个新窗口，但如果我这样做，我必须找出所有不同的样式表才能拉到弹出窗口中。）

看看这个讨论：https://github.com/MrRio/jsPDF/issues/270:

我将addHtml（）方法与html2canvas.js一起用于制作pdf，但对于大数据表，它不会生成pdf，对于短内容，它会很好。请帮我这是我的代码

弗拉门戈回应：

我开始开发一个功能来分解长HTML页面。

试试这个：https://rawgit.com/Flamenco/jsPDF/text-html-table-page-break/examples/html2pdf/test-long-html-table.html

示例代码创建一个长表，并用它生成一个PDF。也许他的设置对你有用。

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Long Table</title>
    </head>
<script src='../../libs/require/require.js'></script>
<script>
require_baseUrl_override = '../../';
require(['../../libs/require/config'], function(){
require(['jspdf.plugin.canvas', 'libs/html2pdf', 'libs/html2canvas/dist/html2canvas', 'libs/saveas'], function(){
var pdf = new jsPDF('p', 'pt', 'a3');
// Enable auto page wrap (there are still margin-top issues...)
pdf.context2d.pageWrapY = pdf.internal.pageSize.height-20;
// create a long table
var table = document.createElement('table');
for (var i=1; i<1000; i++){
    var tr=document.createElement('tr');
    var td=document.createElement('td');
    td.innerHTML = "Item " + i;
    tr.appendChild(td);
    table.appendChild(tr);
}
document.body.appendChild(table);
// render body to pdf
html2pdf(document.body, pdf, function(){
    pdf.save('Test.pdf');
});
}); // require
}); // require
</script>
    <body>
    </body>
</html>

代码有点混乱，但它是有效的。

相关文章：