java-iText html转pdf的问题

Bonjours

已于 2023-02-22 12:34:02 修改

阅读量1.9k

点赞数

文章标签： java

于 2023-02-21 16:49:40 首次发布

本文链接：https://blog.youkuaiyun.com/Bonjours/article/details/129144974

版权

在开发过程中，将Word文档转换为HTML并嵌入Vue和Java项目时，遇到了图片显示、表格列宽和页面样式问题。解决方案包括使用服务器图片处理SVG不支持，设定表格列宽以保持布局，以及将样式内联化以适应HTML。对于表格样式，新版本的iText提供了列宽设置支持。此外，需要对字体大小、间距进行微调，并可能需要引入中文字体来解决中文显示问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

问题一：图片不显示

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

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

问题二：列宽不起作用

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

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

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

最快解决方法：

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

不支持td:first-child写法；

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";
    }

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

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

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

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

打印效果如下：