jsPDF addHTML获取滚动元素的全部内容

Question

如何获得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不会将它们拾取。我想到了弹出一个新窗口，但如果这样做，我必须弄清楚所有不同的样式表才能进入弹出窗口。）

Answer 1

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

我在html2canvas.js中使用addHtml（）方法来制作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>

该代码有点混乱，但它可以工作。