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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-28 08:40:36  来源:igfitidea点击:

jsPdf using html2canvas.js for export pdf from html is not working for large data

javascripthtmlcsshtml2canvasjspdf

提问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

PDFPY

PDFPY

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")
});