网页转pdf,html2canvas + jspdf 方案填坑

作者:jcmp      发布时间:2021-04-25      浏览量:0
一、坑1:图片不显示产生原因: 图片未

一、坑1:图片不显示

产生原因: 图片未开启跨域

解决办法: 升级版本 html2canvas v1.0.0-alpha.1 及以上,解决方案代码如下。

var str = document.getElementById('#html2canvas');html2canvas(str, { useCORS: true, // 设置 useCORS 为 true,即可开启图片跨域 onrendered: function (canvas) { var image = canvas.toDataURL("image/jpeg",1.0); window.open(image); }});

二、坑2:清晰度

产生原因: html2canvas 默认dpi为 72,在高分屏上被放大2倍以上,导致图像失真。

解决办法: 升级版本 html2canvas v1.0.0-alpha.1 及以上,解决方案代码如下。

var str = document.getElementById('#html2canvas');html2canvas(str, { scale: 2, // 设置 scale 为 2 及以上,即可支持高分屏 onrendered: function (canvas) { var image = canvas.toDataURL("image/jpeg",1.0); window.open(image); }});

三、坑3:pdf 一片黑

产生原因: html2canvas 默认背景色为黑色

解决办法: 升级版本 html2canvas v1.0.0-alpha.1 及以上,解决方案代码如下。

var str = document.getElementById('#html2canvas');html2canvas(str, { background: '#FFFFFF', // 默认为黑色,将 background 为其他颜色 onrendered: function (canvas) { var image = canvas.toDataURL("image/jpeg",1.0); window.open(image); }});

四、坑2:长网页导出异常

产生原因: base64 超过 500k,后置字符将丢失

解决办法: 升级版本 html2canvas v1.0.0-alpha.1 及以上,将网页拆分成几部分,解决方案代码如下。

PDF导出

1

2

3