java-iText html转pdf的问题

最近在平台开发的时候，需要将一个word文档转成html嵌入vue和java项目中，需要设计-前后端配合开发，设计设计好版式，然后前端写静态html页面，然后交给后端嵌入项目。期间，碰到了几个问题，总结如下：

问题一：图片不显示

最快解决方法：①不支持svg图片；②用服务器图片。

table里加图片，td设置宽度控制图片大小，比如td的宽度设置为18%，图片设置100%宽度和一个最大宽度，这样就可以放大缩小都适配了。

问题二：列宽不起作用

最快解决方法：表格的第一行的列都要设置列宽（针对有列宽需求的表格来讲的，列数多可以自动撑），比如只有两列的表格显示不好看，那两列都要设置宽度控制。

最新版iText支持设置列宽。老版本iText用<table columns="2" widths="80;20" width="100%">

问题三：页面及表格样式不起作用

最快解决方法：

1. 样式写到html里，不用外部css；

2. 不支持td:first-child写法；

3. body设置的字号不会被子元素继承，所以要为页面里的每个元素设置字体大小。12px大小的文字设置打印出来刚刚好，嵌入网页也适用，建议直接给各元素统一设成12px，后面确实像大标题这样的地方需要修改的再单独设置。

h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    th,
    td,
    span,
    p {
        padding: 0;
        margin: 0;
        font-size: 12px;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    }

4. td样式单独写，或者加class统一写均可。

<td style="width: 20%;">Bank Branch Code</td>
<td class="width">004</td>

5. html设置的margin-top:10px，转成pdf后间距看起来有20px那么高，所以需要减半设置即可。

• 如果有中文，可能还需要引入中文字体。我们这个页面是纯英文所以没碰到中文不显示的问题。

打印效果如下：