解决html2canvas+jspdf 生成pdf 模糊的问题
- 发表于
- 前端
问题
VUE项目使用html2canvas+jspdf生成PDF，发现不同的电脑，下载下来的文件大小不一样，清晰度也不一样；或者下载的PDF看着清晰，但使用打印机打印时，MAC下的没问题，但WINDOWS下就是模糊的。
解决
使用流程上来看，一是使用html2canvas生成图片，二是生成PDF。问题出在html2canvas生成图片这个环节，生成的图片不同的电脑分辨率下生成的DPI清晰度不同，比如MAC下生成的就是高清，WINDOWS下生成的就是普通清晰，所以首先调整html2canvas的清晰度（这里会增加图片的大小）。
| 参数名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| scale（兼容） | number | 1 | 按比例增加分辨率 (2=双倍). |
| dpi（新版已取消） | number | 96 | 将分辨率提高到特定的 DPI（每英寸点数） |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
// 调用的方法 html2canvas(document.querySelector(".report"), { // 以下字段必填 background: "#ffffff", // 一定要添加背景颜色，否则出来的图片，背景全部都是透明的 scale: 3, // 处理模糊问题 dpi: 300, // 处理模糊问题，新版已取消，只设置scale就行 onrendered: function (canvas) { // let url = canvas.toDataURL('image/png', 1.0) let url = canvas.toDataURL(); console.log(url); }, }); |
关于dpi、scale 参数问题
现在新的插件版本已经更新到了 1.4.1 ，我感觉现在用新版的生成的图片还好，挺清楚的，新版的没有 dpi 这个参数，可以两个版本对比一下试试那个清楚
原文连接：解决html2canvas+jspdf 生成pdf 模糊的问题
所有媒体，可在保留署名、
原文连接的情况下转载，若非则不得使用我方内容。
