如何调整jsPDF+html2canvas代码生成高清无模糊PDF？

我之前也碰到过一模一样的情况——用这俩插件生成的PDF总是模糊不清，核心原因其实是html2canvas默认生成的canvas分辨率和屏幕显示分辨率一致，而PDF是面向打印的高分辨率格式，直接把低分辨率的canvas转成PDF自然会糊。下面是几个关键优化点，以及修改后的完整代码：

关键优化措施 #

• 提升canvas缩放比例：通过html2canvas的scale参数，让生成的canvas分辨率翻倍（或按设备像素比自适应），保留更多细节
• 适配PDF中的图片尺寸：因为canvas被放大了，添加到PDF时要按比例缩小，避免超出页面范围
• 优化图片格式与质量：优先用image/png无损压缩格式，若用JPG则把质量拉满到1.0
• 修正分页计算逻辑：缩放后页面高度的计算要同步调整，避免分页错位

修改后的完整代码 #

function CreatePDFfromHTML() { 
    const htmlContent = $(".html-content")[0];
    const HTML_Width = $(htmlContent).width(); 
    const HTML_Height = $(htmlContent).height(); 
    const top_left_margin = 15; 
    // 用设备像素比自适应提升分辨率，也可以手动设为2/3（数值越高越清晰但文件越大）
    const scale = window.devicePixelRatio || 2;
    
    // 保持原页面比例的PDF尺寸
    const PDF_Width = HTML_Width + (top_left_margin * 2); 
    const PDF_Height = (PDF_Width * 1.5) + (top_left_margin * 2); 
    // 缩放后的canvas实际尺寸
    const canvas_image_width = HTML_Width * scale; 
    const canvas_image_height = HTML_Height * scale; 

    // 基于缩放后的高度重新计算分页数量
    const totalPDFPages = Math.ceil((HTML_Height * scale) / PDF_Height) - 1; 

    html2canvas(htmlContent, {
        scale: scale, // 核心：提升canvas分辨率
        useCORS: true, // 页面含跨域图片时开启
        logging: false,
        dpi: 300 // 模拟打印级DPI，和scale配合效果更佳
    }).then(function (canvas) { 
        // 用PNG保证无损质量，也可替换为image/jpeg, 1.0
        const imgData = canvas.toDataURL("image/png"); 
        const pdf = new jsPDF('p', 'pt', [PDF_Width, PDF_Height]); 
        // 添加图片时按原HTML尺寸缩小（抵消canvas的缩放）
        pdf.addImage(imgData, 'PNG', top_left_margin, top_left_margin, HTML_Width, HTML_Height); 

        for (var i = 1; i <= totalPDFPages; i++) { 
            pdf.addPage(PDF_Width, PDF_Height); 
            // 分页位置对应缩放后的高度调整
            const yPosition = -(PDF_Height * i) + (top_left_margin * 4);
            pdf.addImage(imgData, 'PNG', top_left_margin, yPosition, HTML_Width, HTML_Height); 
        } 
        pdf.save("invoice_<?php echo $trackingNumber ;?>.pdf"); 
        $(".html-content").hide(); 
    }); 
}

各优化点的详细说明 #

1. scale参数：window.devicePixelRatio会自动适配当前设备的屏幕分辨率（比如Retina屏是2），手动设为2或3可强制提升分辨率，数值越高清晰度越好，但生成速度会变慢、文件体积会增大
2. dpi设置：dpi:300是打印级别的标准分辨率，和scale配合能让生成的图片更接近专业打印效果
3. 图片格式：PNG是无损格式，适合包含文字、线条的页面；如果页面有大量照片，用JPG并设1.0质量也可以，文件会更小一些
4. 尺寸适配：因为canvas被放大了scale倍，添加到PDF时把宽高设回原HTML尺寸，既能保证图片不被拉伸，又能利用高分辨率提升清晰度

如果还是存在模糊问题，可以排查：

• 页面中的图片是否本身分辨率偏低（比如用小尺寸图片拉伸显示）
• 有没有CSS transform属性导致html2canvas识别异常（可尝试临时移除或调整）
• jsPDF的页面尺寸单位是否正确（这里用的pt是适合打印的单位）

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