使用Html2Canvas+JsPDF导出PDF时文字质量下降问题排查

• 手动传入的width、height参数覆盖了scale的放大效果：你配置了scale:2，但同时强制设置canvas宽高为DOM原始CSS像素值，相当于canvas实际渲染像素没有放大，scale配置失效，文字渲染精度和原始网页一致，转成PDF后缩放就会模糊。
• 缺少高DPI配置：默认html2canvas的渲染DPI适配屏幕显示（96DPI），远低于PDF打印所需的300DPI标准，文字边缘会出现锯齿。
• 若pdfsave方法中插入canvas图片到PDF时存在强制拉伸，也会进一步降低文字清晰度。

1. 移除html2canvas配置中手动指定的width、height参数，让框架根据scale自动计算渲染尺寸，同时提升scale值、添加DPI配置：

html2canvas($(element)[0],{
    allowTaint: true, 
    scale: 3, // 可根据清晰度需求调整为3~4，数值越高文件体积越大
    dpi: 300,
    useCORS: true // 存在跨域静态资源时需添加该配置
}).then(function(canvas) {
    pdfsave(canvas, format, PDF_Width, PDF_Height);
});

2. 调整pdfsave方法逻辑，插入图片时保持canvas原始比例，使用最高质量导出：

function pdfsave(canvas, format, pdfWidth, pdfHeight) {
    // 导出图片质量设为最高
    const imgData = canvas.toDataURL('image/png', 1.0);
    const doc = new jsPDF(format, 'pt', [pdfWidth, pdfHeight]);
    // 按PDF宽度等比例计算图片高度，避免拉伸
    const renderHeight = (canvas.height * pdfWidth) / canvas.width;
    doc.addImage(imgData, 'PNG', 0, 0, pdfWidth, renderHeight);
    doc.save('导出文件.pdf');
}

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