Angular5中使用html2canvas与jsPDF生成PDF画质过低如何优化？

我之前也碰到过一模一样的问题，生成的PDF总是发虚模糊，后来调整了几个关键参数就解决了，给你分享几个实用的优化方向：

• 调高html2canvas的缩放比例（scale）
  你当前设置的scale: 1是默认值，对应屏幕的96dpi，这是画质差的核心原因。建议把scale设为2或3（根据你的需求平衡画质和性能），这样生成的canvas分辨率会成倍数提升，细节会清晰很多。注意别设置太高，不然会增加内存占用和生成时间。

• 优化jsPDF的addImage参数
  只传基础参数会让jsPDF自动拉伸图片，导致模糊。你需要明确指定PDF中图片的宽度和高度，匹配目标PDF的尺寸（比如A4纸宽度是210mm，高度297mm）。另外要注意，高分辨率canvas的尺寸是原元素的scale倍，所以addImage时要把尺寸缩回到原元素大小，避免图片在PDF里被过度放大。

• 正确禁用图像平滑处理
  你代码里的平滑处理设置位置有点问题，应该在生成canvas后立即操作上下文。禁用平滑能避免文字、线条的边缘模糊，尤其是对精细内容帮助很大。

• 处理跨域资源（如果有）
  如果你的内容里包含跨域图片，html2canvas可能无法正确渲染，间接导致画质受损。可以在html2canvas配置里加useCORS: true，同时确保图片服务器允许跨域访问。

修改后的示例代码 #

// 获取目标元素
const content = document.getElementById('content');
// 设定2倍缩放，平衡画质和性能
const scale = 2;

html2canvas(content, {
  scale: scale,
  useCORS: true, // 有跨域图片时开启
  logging: false // 关闭日志提升生成速度
}).then(function(canvas) {
  // 禁用所有浏览器的图像平滑
  const ctx = canvas.getContext('2d');
  ctx.imageSmoothingEnabled = false;
  ctx.mozImageSmoothingEnabled = false;
  ctx.webkitImageSmoothingEnabled = false;
  ctx.msImageSmoothingEnabled = false;

  // 转换为PNG图片数据
  const image = canvas.toDataURL("image/png");
  
  // 初始化A4尺寸的PDF文档
  const doc = new jsPDF('p', 'mm', 'a4');
  const pageWidth = doc.internal.pageSize.getWidth();
  
  // 按比例计算图片在PDF中的高度，适配A4宽度
  const imgWidth = pageWidth;
  const imgHeight = (canvas.height / canvas.width) * imgWidth;
  
  // 添加图片到PDF，明确指定位置和尺寸
  doc.addImage(image, "PNG", 0, 0, imgWidth, imgHeight);
  
  doc.save("test.pdf");
});

这些调整应该能让你的PDF画质有明显提升，如果还有模糊，可以尝试把scale调到3，或者检查内容里的web字体是否完全加载完成再生成PDF。

内容的提问来源于stack exchange，提问作者Aleksandar Tomovic