如何解决iText 5.5.13.2版本XMLWorker转换HTML为PDF的格式错误问题

问题原因 #

• XMLWorker 5.5.x版本本身对CSS的支持度非常有限，不支持:after等伪元素，你写的.row1:after清除浮动的规则完全不生效，导致float布局的所有元素没有正常换行，全部堆叠在一起。
• 默认创建的Document对象使用A4尺寸默认边距（上下左右各36pt），你HTML最外层div写了width:100%+margin，内容总宽度超过PDF页面可渲染宽度，进一步挤压布局。
• 调用parseXHtml方法时没有指定字符编码、字体提供者，导致CSS样式解析不全，自定义字体规则未生效。
• XMLWorker对百分比宽度的浮动元素适配能力差，你代码里33%宽度的浮动元素计算宽度时没有扣除边距、边框的宽度，触发宽度溢出自动换行。

修复方案 #

1. Java代码修改 #

UploadUtil s3Upload = new UploadUtil();
PdfWriter pdfWriter = null;

ByteArrayOutputStream gg = new ByteArrayOutputStream();
try{
    // 自定义页面边距：上下20pt，左右15pt，减少边距占用
    Document document = new Document(PageSize.A4, 15, 15, 20, 20);       

    pdfWriter = PdfWriter.getInstance(document, gg);
    document.open();
    
    // 注册字体，解决字体识别问题，替换成你实际的字体文件路径
    FontProvider fontProvider = new XMLWorkerFontProvider(XMLWorkerFontProvider.DONTLOOKFORFONTS);
    fontProvider.register("C:/Windows/Fonts/simsun.ttc", "SimSun"); // 宋体，可替换为你需要的字体
    
    // 指定字符编码为UTF-8，传入字体提供者
    XMLWorkerHelper.getInstance().parseXHtml(pdfWriter, document, 
            new FileInputStream("C:/Users/jj/Desktop/asdf/tt.html"), 
            new FileInputStream("C:/Users/jj/Desktop/asdf/ttt.css"),
            Charset.forName("UTF-8"),
            fontProvider);
    
    document.close();
    FileOutputStream fos = new FileOutputStream("C:/Users/jj/Desktop/asdf/test.pdf");
    fos.write(gg.toByteArray());
    fos.close();
    
} catch(Exception e){
    e.printStackTrace();
}

2. HTML/CSS修改 #

• 删掉所有float相关布局，改用table实现多列布局，XMLWorker对table的支持度远高于浮动布局。
• 把.row1的清除浮动逻辑删掉，直接每个行块用独立的table或者div，设置width:100%，内部列用td实现，不需要浮动。
• 所有宽度不要写死100%或者33%，可以适当缩小，比如3列布局每列设为32%，留1%的冗余宽度避免溢出。
• 不要用min-width属性，XMLWorker对min-width支持很差，直接写固定宽度或者百分比宽度即可。
• HTML的head标签里加上<meta charset="UTF-8">声明编码。
• CSS里的font-family不要用sans-serif，直接写你注册的具体字体名称。

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