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

【问题标题】：jsPDF addHTML get full contents of scrolling elementjsPDF addHTML 获取滚动元素的全部内容
【发布时间】：2015-12-02 02:38:44
【问题描述】：

如何让 jsPDF 从具有溢出集的元素创建图像/pdf，以便它具有滚动条。以下示例粘贴到 addHTML Have a Play 页面 (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。有足够的滚动屏幕，所以 pdf 不会选择它们。我想过弹出一个新窗口，但如果这样做，我必须找出所有不同的样式表才能拉入弹出窗口。）

【问题讨论】：

标签： javascript jspdf

【解决方案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>

代码有点乱，但可以。

【讨论】：