html转PDF文件，完美解决方案

-----------------------------------------2023年3月13日更新------------------------------------------------

这篇文章写后有很多人私聊问我如何解决内容切分的问题，还有如何在文档中添加图表等问题。这里我对这些问题做一个答复，希望能够帮到大家。

在我们使用wkhtmltopdf工具将html页面转换成pdf的时候，如果不想让内容被切分，则需要给工具一个明确的指示，这个指示就是 css。

防止内容被切分

在每个章节的标题或者其他地方我们往往不希望标题被切成两半，分别出现在两个页面当中。因此，我们需要添加如下样式：

.title { page-break-before: always; page-break-after: always; page-break-inside: avoid;}

样式的含义已经一目了然了，当wkhtmltopdf工具在渲染到标有.title样式的元素时如果剩余空间不足以放置该元素，则会将元素另起一页。

同样，在一般的公司文档中会出现大量的表格。如果希望放置表格被切分也是同样的处理方式：

table tr { word-break: break-all; page-break-before: always; page-break-after: always; page-break-inside: avoid;}

有一个技巧，如果希望表格分布在两个页面时，第二页表格依然保有表头，则需要在编写table的时候将元素进行结构化，即分为：,,。

在文档中添加图表

我生成图表的方式是使用了echarts库。很多人觉得图表的数据是通过http请求的来的，然后基于数据生成图表，所以一遇到图表就不知道该怎么办了。其实图表和普通的html元素并没有什么不同。遇到这种问题我采取的办法就是先利用获取的数据将页面渲染好，然后用wkhtmltopdf工具将渲染好的页面生成pdf。

具体方法有两种：

方法一：前端在浏览器中将整个页面渲染好，然后将整个页面通过http请求传送至后台，后台在接收到html数据后，利用接收到的数据生成一个html文件，再用wkhtmltopdf工具去处理生成的html文件即可。因为此时的html文件只是一个静态页面，里面的所有数据都是固定的，不会再存在异步的问题。方法二：另一个做法就是利用服务端渲染。有过传统web项目开发的人都知道，以前的html页面都是通过后台渲染然后推送至浏览器进行展示的。使用的工具有freemarker, themeleaf等。前端开发人员将整个静态html开发好交给后台开发人员，后台开发人员通过themeleaf等工具将后台数据推送至页面并渲染。然后将生成的html页面利用wkhtmltopdf生成pdf文件。这样的好处就是可以后台进行pdf文件的生成。

第一种方法的弊端就是每次必须通过浏览器将页面打开，而第二种方法则不需要。

将特定内容单独另起一页

有时候我们的文档可能分为几个部分，每个部份需要从新的一页开始展示。但是通过以上方法并不能解决这个问题。所以我们需要对每个需要单独展示的部分进行特殊处理。其实处理的方式与防止内容被切分是一样的。如下：

当你需要在当前部分之前进行分页时：

.page-break-before { page-break-before: always;}

当你需要在当前部分之后进行分页时：

.page-break-after { page-break-after: always;}总结

到这里应该能够满足大多数的开发需求了，希望能够帮到大家。如果