-----------------------------------------2019年3月13日更新------------------------------------------------
这篇文章写后有很多人私聊问我如何解决内容切分的问题，还有如何在文档中添加图表等问题。这里我对这些问题做一个答复，希望能够帮到大家。
在我们使用wkhtmltopdf工具将html页面转换成pdf的时候，如果不想让内容被切分，则需要给工具一个明确的指示，这个指示就是 css。
防止内容被切分
在每个章节的标题或者其他地方我们往往不希望标题被切成两半，分别出现在两个页面当中。因此，我们需要添加如下样式：
page-break-inside: avoid;
样式的含义已经一目了然了，当wkhtmltopdf工具在渲染到标有.title样式的元素时如果剩余空间不足以放置该元素，则会将元素另起一页。
同样，在一般的公司文档中会出现大量的表格。如果希望放置表格被切分也是同样的处理方式：
page-break-inside: avoid;
有一个技巧，如果希望表格分布在两个页面时，第二页表格依然保有表头，则需要在编写table的时候将元素进行结构化，即分为：
<thead>,<tbody>,<tfoot>
。
在文档中添加图表
我生成图表的方式是使用了echarts库。很多人觉得图表的数据是通过http请求的来的，然后基于数据生成图表，所以一遇到图表就不知道该怎么办了。其实图表和普通的html元素并没有什么不同。遇到这种问题我采取的办法就是先利用获取的数据将页面渲染好，然后用wkhtmltopdf工具将渲染好的页面生成pdf。
具体方法有两种：
方法一：前端在浏览器中将整个页面渲染好，然后将整个页面通过http请求传送至后台，后台在接收到html数据后，利用接收到的数据生成一个html文件，再用wkhtmltopdf工具去处理生成的html文件即可。因为此时的html文件只是一个静态页面，里面的所有数据都是固定的，不会再存在异步的问题。
方法二：另一个做法就是利用服务端渲染。有过传统web项目开发的人都知道，以前的html页面都是通过后台渲染然后推送至浏览器进行展示的。使用的工具有
freemarker, themeleaf
等。前端开发人员将整个静态html开发好交给后台开发人员，后台开发人员通过themeleaf等工具将后台数据推送至页面并渲染。然后将生成的html页面利用wkhtmltopdf生成pdf文件。这样的好处就是可以后台进行pdf文件的生成。
第一种方法的弊端就是每次必须通过浏览器将页面打开，而第二种方法则不需要。
将特定内容单独另起一页
有时候我们的文档可能分为几个部分，每个部份需要从新的一页开始展示。但是通过以上方法并不能解决这个问题。所以我们需要对每个需要单独展示的部分进行特殊处理。其实处理的方式与防止内容被切分是一样的。如下：
当你需要在当前部分之前进行分页时：
到这里应该能够满足大多数的开发需求了，希望能够帮到大家。如果本文对你有帮助请为我点个赞，你的支持是我继续分享的最大动力。
---------------------------------------------- 分割线 ------------------------------------------------
最近新换了一个公司，一入职就给了我一个报表下载的项目，从零开始做起。因为之前也做过导出Excel和PDF的相关工作，所以一开始并不觉得有什么困难。直到看到UI设计出的报表之后我的内心是崩溃的。整个报表很长，有各种样式，各种Table。。。这跟用Excel导出一系列数据，或者生成一个简单PDF是很不一样的。因为这两种情况都可以通过后台实现，而且也不复杂。
关于如何通过后台生成一个Excel与PDF这里就不做介绍了，java里都有现成的插件。
先来介绍下我的开发环境：
Vue.js
vue-router
vue-cli(所以项目构建使用的是webpack)
下面来说说这一路走过来我摔了几次键盘。
第一次摔键盘：
拿到任务第一时间开始到网上找各种方案，参考下各位大牛有没有成熟的解决方案，毕竟这也算是一个合理且应用场景比较广泛的需求。我坚信网上一定会有插件提供类似功能。
过程很顺利，我成功找到了jsPDF，jsPDF是一款能够在前端生成PDF并下载的插件，感觉很牛逼。通过jsPDF与htmltocanvas配合使用就能实现将html页面转换成PDF文件并下载。原理就是通过htmltocanvas给html页面拍个照，然后将页面保存在canvas中，再通过jsPDf将canvas贴到PDF文件中。所以，本质上生成的生成的PDF其实里面就是一张图片。
到这里，一切都很完美。。。但是！只能生成单页PDF！！！这么坑？我是不信的，后来找个一个方案：
根据a4纸的高度将生成的canvas图片截成一块一块，然后再分别贴入PDF的不同页面中。
这样就能够给生成多页面PDF了。注意：例子里面的调用方法已经过时了，可以参考
html2canvas官网的例子。
但是！生成的PDF会被截断！不只是图片会被截断，甚至文字也会被截断。这简直让人无法忍受，于是果断摔键盘,换!方!案!
这里给出几个jsPDF的官方网站，如果键盘多的土豪可以研究一下：
gitHub开源地址
gitHub网址的Demo
官方Demo
各位老板可别打我，你可能发现网站打不开，于是很心急的买了个VPN，结果发现还是打不开。这时候不要怀疑，没错，后面两个官方的网址就是打！不！开！所以根本没有文档可以参考，甚至有什么API都不知道。。。有前同事很自(chou)信(pi)的说：你可以去看源文件啊。我只能说：嗯嗯，你说的都对。
第二次摔键盘：
第一种方案失败后万念俱灰，因为网上解决生成PDF文件的方案基本上都是使用jsPDF+htmltocanvas。可是这个方案如此不靠谱，不知道还有没有其他更好的方案，心里有点没底。
经过好长时间的查找，终于在一个提问的回答中看到了一个关键字：
wkhtmltopdf
,于是赶紧搜索。于是找到了一篇
介绍wkhtmltopdf与jsPDF优缺点的文章
，简直是找到了知音有木有，遇到的问题一样一样的。
找到方案之后立马开始尝试，wkhtmltopdf的执行语法是这样的：
wkhtmltopdf htmlPath ouputPath
其中htmlPath是文件路径，可以是网络地址，也可以是本地文件地址。outputPath是导出的PDF文件的存放路径。
在网上找了几个网址，比如CSDN什么的试了一下，还真的可以！生成的PDF文件能够自动分页，唯一的问题就是内容还是会被切分。不过在这之前我已经找到避免分页时，内容被切分的方案了，所以暂时没有理会切分问题，想着回头再解决。具体解决方案我会在接下来的内容里介绍。
有了初步成果之后我开始用我自己的页面做尝试，看看能否顺利转成PDF文件。
。。。。。。。。。耐心等待中。。。。。。。。。
喜闻乐见，失败了。。。文件是生成了，但是里面的内容时一片空白。。。
于是又开始了无尽的google之旅。翻了无数博客之后找了一篇
关于wkhtmltopdf导出文件空白的博客
，里面给出了一些可能会导致文档空白的例子。我的空白问题并不是这些情况引起的，因此我没有采用这个方案。如何在vue项目中解决空白问题我会
单独写一篇博客
，这里只介绍一些通用情况。在我的项目中引起空白页的主要原因是就是，使用webpack打包的项目，index.html页面在查看的时候是不显示具体页面内容的，具体内容都包含在一个js文件中，只有在访问到具体某个页面路由的时候相应的资源才会被调出来。但是wkthtmltopdf只能解析静态资源，不会去运行js文件。因此，index.html中包含什么内容，导出来的PDF文件就包含哪些内容。
这里介绍一个判断当前页面能否被wkhtmltopdf正常导出的一个方法：
将当前页面在浏览器中另存为，保存到本地，如果本地文件打开后是有内容的，那么wkhtmltopdf就能正常导出。因为这个工具只会解析html与CSS，并不会去运行js文件。所以在webpack这种项目中，所有资源都被打包成一个js文件，wkhtmltopdf就无法正常导出了。还有一个问题就是：如果页面中的内容时在页面开始渲染时才通过ajax请求从后台获取的，也是无法被渲染出来的，原因还是wkhtmltopdf不会去执行js文件，所以在渲染的时候ajax请求是不会发送的，更加不会被渲染到页面上。
这个问题我的解决方案是：等待页面正常渲染过后将整个页面传给后台，后台在接到页面数据后在本地保存为一个html文件，然后使用wkhtmltopdf将本地html文件转换成PDF文件。不过这样做要注意：一定要在后台提前准备好静态资源，否则在生产环境下CSS样式和图片什么的就无法渲染。
获取页面信息的代码如下：
window.open(vm.apiHost + 'download?pdfFilePath=' + res.pdfFilePath)
到此为止，已经可以成功下载PDF文件啦，如果你在后台准备了静态文件，生成的PDF文件应该是包含样式的。但是背景图这种较大的图片因为无法被压缩成base64，所以也需要在静态问价那种包含，并将路径配置正确。
为了庆祝一下阶段性成果，我还是要怒砸键盘！因为导出的内容切割问题还没解决。今天写的有点累了，内容切割问题下次再补充吧，休息一会儿。
对了还可以使用Freemarker来生成PDF文件，但是因为一开始把这个方案忘了（其实是不知道怎么在Vue框架中使用），所以就没有研究这种方案。
作者：CodingSpace
链接：https://juejin.cn/post/6844903612993241101
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
示例的测试代码均在 Windows10 的 Linux子系统 中进行；
原文档地址：https://wkhtmltopdf.org/usage/wkhtmltopdf.txt
版本名称： wkhtmltopdf 0.12.6 (with patched qt)
wkhtmltopdf patched qt 是将一个或多个HTML页面合并为一个PDF文档的应用程序。
wkhtmltopdf [GLOBAL OPTION]... [OBJECT]... <output file>
GLOBAL
OPTION ： 全局选项
OBJECT： 输入的文档对象，即网页（页面对象）、封面、目录中任何对象
output file： 输出的PDF文件， 如
../dir/file_name.pdf
wkhtmltopdf能够将多个对象（页面对象、封面、目录等）合并输出到一个PDF文件中，这个对象可以是网页（页面对象）、封面、目录中的任何一个或多个。
这些对象输出到PDF文件中的顺序，可以通过命令行中的选项参数配置。
配置选项参数，既可以针对每个对象配置选项参数，也可以配置全局选项。
配置选项参数有两种方式：
配置全局选项
配置页面选项，针对输入的文档对象配置参数
注意：
全局选项只能在 全局选项区域 [GLOBAL OPTION] 处配置，也就是 wkhtmltopdf 后面的位置
只针对某个输入文档对象的配置选项，紧跟在输入对象之后，进行配置
页面对象是将输入的单个网页的内容输出到PDF文档中。
页面对象的参数可以配置在全局选项区域 [GLOBAL OPTION] 或 页面选项区域 [PAGE OPTION] 的位置。
在下方的【页面选项】、【页眉页脚选项】部分，可以找到适合你需求的选项配置。
(page)? <input url/file name> [PAGE OPTION]...
input url/file name： 输入的页面文件对象
PAGE OPTION：页面选项
wkhtmltopdf https://www.baidu.com/ --no-images /mnt/d/pdf/baidu.pdf
封面对象是将输入的单个网页的内容输出到PDF文档中。
封面对象生成的PDF页面，不会出现在目录中，也没有页眉和页脚。
所有页面对象的选项（页面选项），对于封面对象同样也适用。
cover <input url/file name> [PAGE OPTION]...
wkhtmltopdf --footer-center '页脚内容' cover https://www.baidu.com/ --no-images https://www.baidu.com/more/ --no-images /mnt/d/pdf/baidu.pdf
目录对象是将内容中的
<h?>
标签生成目录，然后把目录的内容输出到PDF文档中。
所有页面对象的选项（页面选项），对于目录对象同样也适用，另外目录对像还有自己对应的专门【目录选项】。
目录是通过XSLT样式表生成的，这意味着可以对其进行自定义样式设置，使其外观符合您的样式要求。
要想了解目录如何自定义样式，可以通过
wkhtmltopdf --dump-default-toc-xsl
选项，查看默认样式配置，然后可以通过
--dump-outline
选项，将生成的大纲（目录）保存到文件中，进行查看修改对应样式。要想了解更多内容，请查看【大纲选项】。
toc [TOC OPTION]...
默认的页面尺寸是 A4 纸大小，但是通过–page-size选项可以修改为其他的任何尺寸，例如A3、Letter、Legal。
更多页面尺寸查阅：https://doc.qt.io/archives/qt-4.8/qprinter.html#PaperSize-enum
如果要对页面设置其他尺寸大小可以使用 --page-width 和 --page-height 这两个选项。
主要应用于批处理。
如果需要批量转换许多页面，并且感到 wkhtmltopdf 速度很慢，那么可以尝试
--read-args-from-stdin
选项。
当使用
--read-args-from-stdin
选项时，批处理的每一行输入命令，都会与
--read-args-from-stdin
后的选项参数合并到一起，并应用到每一行命令中。
示例如下：
echo "https://www.baidu.com/ baidu.pdf" >> cmds
echo "cover https://www.baidu.com/ http://www.people.com.cn/GB/208743/403202/403212/index.html people.pdf" >> cmds
wkhtmltopdf --read-args-from-stdin --no-images < cmds
echo 的两行命令用于生成批处理文件cmds，
最后一行
wkhtmltopdf --read-args-from-stdin --no-images < cmds
用于读取cmds中的命令，
并把
--no-images
选项与每一个输入命令合并后，输出PDF文件，
以上示例会输出两个PDF文件，baidu.pdf 和 people.pdf。
默认情况下，代理信息将从环境变量中读取：proxy、 all_proxy 和 http_proxy，
代理设置也能通过
-p, --proxy <proxy>
选项配置
用 BNF 设置代理如下：
<type> := "http://" | "socks5://"
<serif> := <username> (":" <password>)? "@"
<proxy> := "None" | <type>? <string>? <host> (":" <port>)?
如果不熟悉 BNF配置，下面是一些示例:
http://user:password@myproxyserver:8080
socks5://myproxyserver
使用 --header-* and --footer-* 选项，可以把页眉、页脚添加到PDF文档中。
在使用一些选项（如 --header-left）设置页眉、页脚的文本字符串中，可以使用以下变量：
这些变量将被替换为相应的值。
例如，在页面右上角显示“当前是第x页|共y页”， 设置页眉选项如下：
--header-right "当前是第[page]页|共[topage]页"
页眉、页脚也支持用html文档设置。
例如，通过设置--header-html header.html选项，header.html中内容如下：
<!DOCTYPE html>
<script>
function subst() {
var vars = {};
var query_strings_from_url = document.location.search.substring(1).split('&');
for (var query_string in query_strings_from_url) {
if (query_strings_from_url.hasOwnProperty(query_string)) {
var temp_var = query_strings_from_url[query_string].split('=', 2);
vars[temp_var[0]] = decodeURI(temp_var[1]);
var css_selector_classes = ['page', 'frompage', 'topage', 'webpage', 'section', 'subsection', 'date', 'isodate', 'time', 'title', 'doctitle', 'sitepage', 'sitepages'];
for (var css_class in css_selector_classes) {
if (css_selector_classes.hasOwnProperty(css_class)) {
var element = document.getElementsByClassName(css_selector_classes[css_class]);
for (var j = 0; j < element.length; ++j) {
element[j].textContent = vars[css_selector_classes[css_class]];
</script>
</head>
<body style="border:0; margin: 0;" onload="subst()">
<table style="border-bottom: 1px solid black; width: 100%">
<td class="section"></td>
<td style="text-align:right">
Page <span class="page"></span> of <span class="topage"></span>
</table>
</body>
</html>
从示例中可以看出，参数以GET方式发送到页眉、页脚的html文档,如下形式。
http://www.xxx.com/header.html?page=xxx&frompage=xxx&topage=xxx&webpage=xxx§ion=xxx&subsection=xxx&date=xxx&isodate=xxx&time=xxx&title=xxx&doctitle=xxx&sitepage=xxx&sitepages=xxx
页眉、页脚的html文档也支持自定义参数--header-html header.html?abc=123，在html文档的url中，自定义参数将自动与默认参数拼接到一起，如下：
http://www.xxx.com/header.html?page=xxx&frompage=xxx&topage=xxx&webpage=xxx§ion=xxx&subsection=xxx&date=xxx&isodate=xxx&time=xxx&title=xxx&doctitle=xxx&sitepage=xxx&sitepages=xxx&abc=123
大纲就是PDF阅读器中，用于显示导航跳转的部分，不属于PDF文档中的一部分，主要是方便阅读器浏览导航使用。
Wkhtmltopdf 用 patched qt 支持PDF大纲（也称为书签），可以通过设置--outline （默认选项）选项实现。
大纲是根据 <h?>(h1–h6) 标签生成的，有关如何实现的详细说明，请参见目录部分。
如果 <h?> 标签在HTML文档中嵌套的层级非常深，那么大纲树的层级也会变得非常深。可以通过--outline-depth选项来设置大纲的层级深度。
TOC 是 英文table of contents的缩写。
目录是PDF文件中的一个页面，和我们书本中的目录是一个意思。
目录是根据web文档中的 <h?>(h1–h6) 标签生成。
首先生成一个XML文档，然后使用XSLT将其转换为HTML。
通过向命令行添加toc对象，可以将目录添加到文档中，示例如下：
wkhtmltopdf toc https://doc.qt.io/archives/qt-4.8/qstring.html qstring.pdf
保存大纲到文件中
通过使用 --dump-outline 选项，将生成的xml大纲文档转储到文件（示例中：toc.xml）中，可以查看生成的XML文档。例如：
wkhtmltopdf --dump-outline toc.xml https://doc.qt.io/archives/qt-4.8/qstring.html qstring.pdf
指定目录样式表
通过使用 --xsl-style-sheet 选项，指定生成目录的XSLT样式表文档。
wkhtmltopdf toc --xsl-style-sheet my.xsl https://doc.qt.io/archives/qt-4.8/qstring.html qstring.pdf
查看默认样式表
通过使用 --dump-default-toc-xsl 选项，把默认的XSLT样式表输出到命令行面板中。这对于自定义样式表，将是一个很好的参考建议。
wkhtmltopdf --dump-default-toc-xsl
XML文档位于命名空间"http://wkhtmltopdf.org/outline"之中，它有一个名为"outline" 的根节点，它包含许多“item”节点。一个“item”节点，可以包含任意数量的“item”节点。这些是项目所代表部分的概要小节。项目节点具有以下属性：
The XML document is in the namespace "http://wkhtmltopdf.org/outline" it has a
root node called "outline" which contains a number of "item" nodes. An item
can contain any number of item. These are the outline subsections to the
section the item represents. A item node has the following attributes:
“title” 章节的名称
“page” 章节所在位置的页码
“link” 从链接跳转到该章节的URL。（a URL that links to the section.）
“backLink” 从章节返回锚点的链接。（the name of the anchor the section will link back to.）
其他的 TOC 选项只影响默认样式表，因为它们在指定自定义样式表时将无法工作。
如果有任何问题反馈，请查看https://wkhtmltopdf.org/support.html
