itextpdf html2pdf生成PDF时base64图片显示模糊如何解决

问题核心原因 #

• 前端ECharts导出Base64图片时默认像素比为1，导出的原始图片像素密度不足，渲染到PDF时被拉伸
• 后端配置的分辨率参数和PDF实际渲染DPI不匹配：当前设置的2000f分辨率不符合常规渲染逻辑，且未给PdfWriter配置对应高DPI参数，默认按72DPI栅格化图片，必然出现模糊
• 自定义页面尺寸时未按DPI等比换算，导致整体布局包括图片被非等比缩放

分步修复方案 #

1. 前端提高ECharts导出图片的像素密度 #

调用ECharts的getDataURL方法导出Base64时，手动指定pixelRatio参数，从根源提高导出图片的像素量，一般设置为3（对应3倍视网膜屏清晰度）即可，最高不要超过5避免文件体积过大：

// ECharts导出Base64配置示例
const base64Str = chartInstance.getDataURL({
  type: 'png',
  pixelRatio: 3,
  backgroundColor: '#ffffff' // 避免透明背景在PDF中出现色差
});

同时在HTML模板中，给渲染该Base64图片的<img>标签设置明确的宽高属性，不要仅靠CSS相对单位缩放，保证图片渲染尺寸和导出时的预期尺寸一致。

2. 修正后端iText渲染配置 #

去掉不合理的2000f分辨率设置，统一前后端DPI参数，给PdfWriter开启高清晰度渲染配置，修正后的代码如下：

public static void main(String[] args) throws Exception{
    File file = FileUtil.newFile("D:/test.html");
    BufferedOutputStream outputStream = FileUtil.getOutputStream("D:/test.pdf");
    BufferedInputStream inputStream = FileUtil.getInputStream(file);
    
    ConverterProperties converterProperties = new ConverterProperties();
    FontProvider fontProvider = new DefaultFontProvider();
    FontProgram fontProgram = FontProgramFactory.createFont(Constant.CONFIG_PATH + File.separator + "simsun.ttc,1");
    fontProvider.addFont(fontProgram);
    
    // 统一设置渲染分辨率为300DPI（印刷级清晰度），不要设置无意义的超高数值
    MediaDeviceDescription mediaDeviceDescription = new MediaDeviceDescription(MediaType.SCREEN);
    mediaDeviceDescription.setResolution(300f);
    converterProperties.setFontProvider(fontProvider);
    converterProperties.setMediaDeviceDescription(mediaDeviceDescription);
    
    // 配置Writer参数，设置合理压缩级别平衡体积和清晰度
    WriterProperties writerProperties = new WriterProperties()
            .setCompressionLevel(3); 
    PdfDocument pdfDoc = new PdfDocument(new PdfWriter(outputStream, writerProperties));
    // 自定义页面尺寸需按DPI等比换算：72DPI下1000*1700的尺寸，对应300DPI需放大为原来的300/72≈4.17倍
    pdfDoc.setDefaultPageSize(new PageSize(4167f, 7083f));
    
    HtmlConverter.convertToPdf(inputStream, pdfDoc, converterProperties);
    
    // 关闭流资源
    inputStream.close();
    pdfDoc.close();
    outputStream.close();
}

调优说明 #

• 若不需要印刷级清晰度，可将分辨率统一设为144DPI，对应ECharts导出pixelRatio设为2，页面尺寸按144/72=2倍换算即可，文件体积会更小
• 不要随意拉大分辨率和pixelRatio的数值，两者保持比例匹配即可，过高的数值不会带来明显的清晰度提升，反而会导致PDF体积暴涨、生成速度变慢

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