freemark 踩坑之旅-使用openhtmltopdf 将 html 转 为 pdf分页问题

image

概述

想要做出比较美观的pdf ，比较好的实现方式是使用html 转 pdf。后端生成html可以使用 freemark 去实现。由于很多时候freemark 中的数据是动态的，所以生成的html 也是动态的。很难排版，无法确定分页位置。那么在转pdf 的时候就面临分页的问题，特别是表格。一个表格被分割成两页，不仅影响美观，查看数据也不是很方便，如下所示

image

解决方案

在style 中添加如下样式

        table, tr, td, th, tbody, thead, tfoot {
            page-break-inside: avoid ;
                   }

解决后的效果

image

解析

其实这个样式（style）就是给 table,tr,td 等控件加上不可分页拆分的属性。从而保证整个控件的完整性，不被分割。比如整个table 不进行分页，当前页无法完整显示整个table 的时候，把整个table 移动到下一页显示即可。可参考GitHub 上关于分页特性 的介绍。也可以借鉴下相关issue。

完美解决方案

上面的方式虽然解决了单个控件的分割问题，但我们可以看到标题和表格还是分开的。其实上面的解决方案只是个雏形版本，只是为了说明问题。
真正解决起来也很简单，只需要在标题和表格的父组件如div上设置page-break-inside: avoid ;属性即可。如果有多个类似的表格，可以为父组件指定一个类名（class），在class 里面设置page-break-inside: avoid ;属性。