解决html2canvas+jspdf 生成pdf 模糊的问题

发表于 2024年04月08日
前端

目录表

问题

VUE项目使用html2canvas+jspdf生成PDF，发现不同的电脑，下载下来的文件大小不一样，清晰度也不一样；或者下载的PDF看着清晰，但使用打印机打印时，MAC下的没问题，但WINDOWS下就是模糊的。

解决

使用流程上来看，一是使用html2canvas生成图片，二是生成PDF。问题出在html2canvas生成图片这个环节，生成的图片不同的电脑分辨率下生成的DPI清晰度不同，比如MAC下生成的就是高清，WINDOWS下生成的就是普通清晰，所以首先调整html2canvas的清晰度（这里会增加图片的大小）。

参数名称	类型	默认值	描述
scale（兼容）	number	1	按比例增加分辨率 (2=双倍).
dpi（新版已取消）	number	96	将分辨率提高到特定的 DPI（每英寸点数）

// 调用的方法
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);
},
});