Question

如何让jsPDF从具有溢出设置的元素创建一个image / pdf，以便它具有滚动条。以下示例粘贴到addHTML中有一个Play页面（http://mrrio.github.io/jsPDF/）只会为正在显示的div部分生成一个pdf，即使我选择＆＃34; middle＆＃34; 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不会选择它们我想要弹出一个新窗口，但如果我这样做，我必须找出所有不同的样式表来拉入弹出窗口。）

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>

代码有点严重，但它确实有效。

jsPDF addHTML获取滚动元素的完整内容

1 个答案: