jsPdf 使用 html2canvas.js 从 html 导出 pdf 不适用于大数据答案

【问题标题】：jsPdf using html2canvas.js for export pdf from html is not working for large datajsPdf 使用 html2canvas.js 从 html 导出 pdf 不适用于大数据
【发布时间】：2015-03-30 19:25:39
【问题描述】：

您好，我正在使用 jsPdf 制作 html 内容的 pdf，它适用于短内容和创建 pdf，但是当我尝试使用 html2canvas.js（用于渲染 css）的大型内容时，它不是创建pdf。对此的任何建议或示例代码都会有所帮助。谢谢。

【问题讨论】：

标签： javascript html css html2canvas jspdf

【解决方案1】：

可以为大文件创建 pdf。主要有两种方法可以做到这一点：

1. html -> canvas -> image -> pdf（我假设你正在尝试这种方法）

2。 html -> pdf（如果 html 包含 svg，则不起作用）

我建议您选择 (2)，除非您有充分的理由选择 (1)（例如，如果您有 svg 内容）--这对浏览器来说是相当昂贵的操作，而且浏览器也有可能崩溃。

1. html -> 画布 -> 图片 -> pdf

这里描述得非常清楚 - https://github.com/MrRio/jsPDF/issues/339#issuecomment-53327389

我使用此方法时的经验 - 当生成的 pdf 包含超过 2-3 页时崩溃。（在最新的 chrome 和 firefox 上测试）

2。 html -> pdf

var pdf = new jsPDF('l', 'pt', 'a4');
 var options = {
    pagesplit: true
};

pdf.addHTML($('body'), 0, 0, options, function(){
    pdf.save("test.pdf");
});

与上述方法相比，这要快得多。在 1-2 秒内生成包含 5-6 页的 pdf！

希望这会有所帮助！

【讨论】：

这就像一个魅力。我唯一的问题是，有没有办法定位主体内的特定 div，而不是孔主体？
是的，使用答案中的第二种方法并将 $('body') 替换为您的 div 的适当 jquery 选择器。例如。 $('#id_of_your_div')
您好！你能帮我从 div 中获取所有内容，而不仅仅是在视口上可见的内容吗？
一份53页的pdf怎么样？

【解决方案2】：

PDFPY

https://www.npmjs.com/package/pdfpy

var data = {
    //the key as to be same as below
    input: "./test.html",
    output: "./output.pdf"
}

pdfpy.file(data, function(err, res) {
    if(err) throw err

    if(res) console.log("success")
});

【讨论】：