使用JavaScript将HTML转PDF时画质降低、文字模糊如何解决

问题场景 #

使用html2canvas+jsPDF方案实现HTML导出PDF功能时，浏览器端DOM显示正常，但导出的PDF存在文字发虚模糊、色彩不纯带噪点的问题，原有实现代码如下：

public convertToPDF()
{
  let domElement = this.pdfTable.nativeElement as HTMLElement;
  html2canvas(domElement).then(canvas => {
    // Few necessary setting options
    var imgWidth = 210;
    var pageHeight = 750;
    var imgHeight = canvas.height * imgWidth / canvas.width; 

    var heightLeft = imgHeight;

    const contentDataURL = canvas.toDataURL('image/png')
    let pdf = new jspdf('p', 'mm', 'a4'); // A4 size page of PDF
    var position = 0;
    pdf.addImage(contentDataURL, 'JPG', 0, position, imgWidth, imgHeight)
    pdf.save('new-file.pdf'); // Generated PDF
  });
}

核心问题点 #

• html2canvas默认采用1倍设备像素比渲染canvas，生成的位图分辨率不足，拉伸至A4幅面时会出现明显模糊
• 图片格式参数不匹配：canvas导出为无损PNG格式，调用addImage时却指定为JPG格式，会触发jsPDF二次有损压缩，直接造成色彩杂色、边缘发虚
• 未开启文字专用抗锯齿配置，文字渲染边缘生硬
• 原代码中pageHeight取值错误，mm单位下A4纸高度为297mm，原值750为像素单位数值，会导致分页逻辑失效

修复后实现代码 #

调整高清渲染参数、修正格式匹配问题、补全基础分页逻辑后的代码如下：

public convertToPDF()
{
  let domElement = this.pdfTable.nativeElement as HTMLElement;
  // 配置高清渲染参数
  html2canvas(domElement, {
    scale: 3, // 3倍缩放，平衡清晰度和文件体积，可按需在2-4区间调整
    useCORS: true, // 页面存在跨域图片时开启
    logging: false,
    letterRendering: true // 开启文字抗锯齿，优化文字边缘平滑度
  }).then(canvas => {
    const imgWidth = 210; // A4纸宽度 单位mm
    const pageHeight = 297; // A4纸总高度 单位mm
    const imgHeight = canvas.height * imgWidth / canvas.width; 
    let heightLeft = imgHeight;
    let position = 0;

    const contentDataURL = canvas.toDataURL('image/png', 1.0); // 导出最高质量PNG资源
    const pdf = new jspdf('p', 'mm', 'a4');
    // 格式参数对应改为PNG，避免二次有损压缩
    pdf.addImage(contentDataURL, 'PNG', 0, position, imgWidth, imgHeight);
    
    // 多页内容自动分页
    heightLeft -= pageHeight;
    while (heightLeft >= 0) {
      position = heightLeft - imgHeight;
      pdf.addPage();
      pdf.addImage(contentDataURL, 'PNG', 0, position, imgWidth, imgHeight);
      heightLeft -= pageHeight;
    }

    pdf.save('new-file.pdf');
  });
}

参数优化说明 #

• scale参数建议取值2-3：数值越高导出的PDF清晰度越高，但生成的文件体积也会同步增大，3倍缩放可满足绝大多数打印场景的清晰度要求
• 图片格式需前后统一：如果导出PNG就对应在addImage中指定PNG格式；如果追求更小文件体积，可以统一使用JPG格式并设置压缩质量，文字类内容优先选择PNG格式保证清晰度
• 开启letterRendering配置可专门优化文字渲染效果，减少文字边缘锯齿

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