javascript jsPdf 使用 html2canvas.js 从 html 导出 pdf 不适用于大数据
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/28250810/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jsPdf using html2canvas.js for export pdf from html is not working for large data
提问by Ankit Dubey
Hi I am using jsPdf for making pdf of html content, it is going fine for short content and creating pdf , but when I am trying to use it on large content with html2canvas.js (for rendering css), it is not creating pdf. Any suggestions or sample code for this would be helpful.Thank you.
嗨,我正在使用 jsPdf 来制作 html 内容的 pdf,它对于短内容和创建 pdf 都很好,但是当我尝试在带有 html2canvas.js(用于呈现 css)的大内容上使用它时,它并没有创建 pdf。对此的任何建议或示例代码都会有所帮助。谢谢。
回答by prad
It is possible to create pdf for large files. There are primarily two ways to do this :
可以为大文件创建 pdf。主要有两种方法可以做到这一点:
1. html -> canvas -> image -> pdf(I assume you are trying this approach)
1. html -> canvas -> image -> pdf(我假设您正在尝试这种方法)
2. html -> pdf(does not work if html contains svg)
2. html -> pdf(如果 html 包含 svg,则不起作用)
I would suggest you to go for (2)unless you have a good reason to go for (1)(like if you are have svg content)-- it is quite expensive operation for the browser and there is possibility of the browser crashing too.
我建议您选择(2),除非您有充分的理由选择(1)(例如,如果您有 svg 内容)——这对浏览器来说是非常昂贵的操作,并且浏览器也有可能崩溃.
1. html -> canvas -> image -> pdf
1. html -> 画布 -> 图像 -> pdf
This is very neatly described here - https://github.com/MrRio/jsPDF/issues/339#issuecomment-53327389
这在这里描述得非常清楚 - https://github.com/MrRio/jsPDF/issues/339#issuecomment-53327389
My experience when using this method - crashes when the pdf generated contains more than 2-3 pages. (tested on latest chrome and firefox)
我使用这种方法时的经验 - 当生成的 pdf 包含超过 2-3 页时崩溃。(在最新的 chrome 和 firefox 上测试过)
2. html -> pdf
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");
});
This is way faster compared to above approach. Generates pdf containing 5-6 pages in 1-2 seconds!
与上述方法相比,这要快得多。在 1-2 秒内生成包含 5-6 页的 pdf!
Hope this helps!
希望这可以帮助!
回答by Keerthi Niranjan
https://www.npmjs.com/package/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")
});