最近在平台开发的时候,需要将一个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那么高,所以需要减半设置即可。
如果有中文,可能还需要引入中文字体。我们这个页面是纯英文所以没碰到中文不显示的问题。
打印效果如下:
![](https://i-blog.csdnimg.cn/blog_migrate/0c83244a5eab0b766197bbe1affe50d8.png)