html转PDF文件，完美解决方案——jsPDF,htmltocanvas,pdfmake,wkhtmltopdf,TuesPechkin,snappy

-----------------------------------------2019年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的时候将元素进行结构化，即分为：<thead>,<tbody>,<tfoot>。

在文档中添加图表

我生成图表的方式是使用了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;
}

总结

到这里应该能够满足大多数的开发需求了，希望能够帮到大家。如果本文对你有帮助请为我点个赞，你的支持是我继续分享的最大动力。

---------------------------------------------- 分割线 ------------------------------------------------

最近新换了一个公司，一入职就给了我一个报表下载的项目，从零开始做起。因为之前也做过导出Excel和PDF的相关工作，所以一开始并不觉得有什么困难。直到看到UI设计出的报表之后我的内心是崩溃的。整个报表很长，有各种样式，各种Table。。。这跟用Excel导出一系列数据，或者生成一个简单PDF是很不一样的。因为这两种情况都可以通过后台实现，而且也不复杂。

关于如何通过后台生成一个Excel与PDF这里就不做介绍了，java里都有现成的插件。

先来介绍下我的开发环境：

Vue.js
Vuex
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的官方网站，如果键盘多的土豪可以研究一下：

各位老板可别打我，你可能发现网站打不开，于是很心急的买了个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样式和图片什么的就无法渲染。

获取页面信息的代码如下：

复制代码

let htmlEle = document.querySelector('#downloadPaper');

为index.html页面的html跟标签附一个id值：downloadPaper，然后通过ajax请求将整个页面信息传递给后台。注意：传送类型为post，参数类型为'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'（具体类型还是要以后台实际为准）。在传参的时候记得取出htmlEle中的html元素：

复制代码

{
    searchData： htmlEle.innerHTML
}

其他也没啥了，后台在成功生成PDF文件后就可以返回文件路径啦，然后前端调用下载接口，将文件路径传递回去就能下载文件啦：

复制代码

window.open(vm.apiHost + 'download?pdfFilePath=' + res.pdfFilePath)

到此为止，已经可以成功下载PDF文件啦，如果你在后台准备了静态文件，生成的PDF文件应该是包含样式的。但是背景图这种较大的图片因为无法被压缩成base64，所以也需要在静态问价那种包含，并将路径配置正确。

为了庆祝一下阶段性成果，我还是要怒砸键盘！因为导出的内容切割问题还没解决。今天写的有点累了，内容切割问题下次再补充吧，休息一会儿。

对了还可以使用Freemarker来生成PDF文件，但是因为一开始把这个方案忘了（其实是不知道怎么在Vue框架中使用），所以就没有研究这种方案。

作者：CodingSpace
链接：https://juejin.cn/post/6844903612993241101
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

wkhtmltopdf 0.12.6 中文文档（精心整理）-CSDN博客

wkhtmltopdf 0.12.6 中文文档

说明

示例的测试代码均在 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]...

全局选项

> 帮助与输出

选项	描述	默认/值	可选值
-h, --help	显示帮助
-H, --extended-help	显示详细的帮助说明
–htmldoc	输出HTML格式的帮助
–readme	输出 readme 文档
–license	输出许可证信息并退出
-V, --version	输出版本信息并退出
–manpage	输出man配置说明
–log-level	设置日志级别	info	none, error, warn，info
-q, --quiet	不输出任何日志，（同 --log-level none）

> 页面尺寸与方向

选项	描述	默认/值	可选值
-B, --margin-bottom	设置页面下边距	0
-L, --margin-left	设置页面左边距	10mm
-R, --margin-right	设置页面右边距	10mm
-T, --margin-top	设置页面上边距	0
–page-width	页面宽度，值需带单位
–page-height	页面高度，值需带单位
-s, --page-size	页面尺寸	A4	A4, Letter, 等
-O, --orientation	设置纸张方向	Portrait	Landscape（横向）， Portrait（纵向）

> 输出PDF数量

选项	描述	默认/值
–copies	输出副本的数量，也就是说一次性输出几份PDF	1
–collate	输出多个副本时进行校验	默认选项
–no-collate	输出多个副本时不校验

> 颜色图像分辨率

选项	描述	默认/值
-d, --dpi	设置分辨率（基于X11的系统无效）	96
-g, --grayscale	PDF输出颜色为黑白色
–image-dpi	PDF中嵌入的图像，缩放到该分辨率	600
–image-quality	jpeg图片压缩到这个质量	94

> 其他

选项	描述	默认/值	可选值
–cookie-jar	读取和写入cookie，从jar文件中	存放jar文件路径
-l, --lowquality	生成低质量文档；减少存储空间
–no-pdf-compression	不压缩PDF文档（不建议使用）
–read-args-from-stdin	从标准输入中读取命令行参数，并应用到每个命令行，用于批处理
–title	生成PDF文档标题（不指定则使用第一个文档的标题）		？？？
–use-xserver	使用X服务器（没有X11，某些插件和其他东西可能无法工作）

页面选项

> HTTP、代理、cookie

选项	描述	可选值
–cookie	设置cookie，value应为url编码	可重复
–custom-header	设置HTTP请求头	可重复
–custom-header-propagation	为每个加载的资源设置HTTP请求头，请求头的参数由–custom-header 指定
–no-custom-header-propagation	不为每个加载的资源设置HTTP请求头
–bypass-proxy-for		可重复
-p, --proxy	使用代理
–proxy-hostname-lookup	使用这个（ --proxy）代理解析主机名
–username	http授权用户名
–password	Http认证密码，访问带账号密码的页面
–post	添加额外的POST字段	可重复
–post-file	添加额外的文件	可重复
–ssl-crt-path	OpenSSL PEM格式的ssl客户端证书公钥的路径，optionally followed by intermediate ca and trusted certs
–ssl-key-password	SSL客户端证书私钥密码
–ssl-key-path	OpenSSL PEM格式的ssl客户端证书私钥的路径

> javascript 相关

选项	描述	默认/值	可选值
–debug-javascript	输出javascript调试信息
–no-debug-javascript	不输出javascript调试信息	默认选项
-n, --disable-javascript	web页面禁用javascript
–enable-javascript	web页面加载javascript	默认选项
–javascript-delay	等待javascript完成的时间	200	单位毫秒
–run-script	页面加载完成后，运行此javascript
–stop-slow-scripts	停止运行缓慢的javascripts	默认选项
–no-stop-slow-scripts	等待运行缓慢的javascripts
–window-status	等待window.status等于此字符串时，打印PDF页面

> 样式、显示、编码

选项	描述	默认/值
–user-style-sheet	指定样式表，应用到每个页面
–default-header	设置一个默认页眉，左侧是页面名称，右侧是页码；相当于设置 --header-left=’[webpage]’ --header-right=’[page]/[toPage]’ --top 2cm --header-line
–page-offset	设置起始页码	0
–minimum-font-size	设置最小字号
–print-media-type	使用print媒体类型代替screen类型
–no-print-media-type	禁止用print媒体类型代替screen类型	默认选项
–viewport-size <>	设置视口大小，如果有自定义滚动条或css属性overflow 模拟窗口
–disable-smart-shrinking	禁止使用WebKit pixel/dpi比值非恒定的智能缩放策略
–enable-smart-shrinking	允许使用WebKit pixel/dpi比值非恒定的智能缩放策略	默认选项
–zoom	设置生成PDF时，web页面的缩放比例	1
–exclude-from-outline	禁止当前页面添加到目录和大纲中
–include-in-outline	允许当前页面添加到目录和大纲中	默认选项
–encoding	设置输入文本的默认编码

> HTML、图片、背景

选项	描述	默认/值
–checkbox-checked-svg	复选框选中状态，应用此svg文件
–checkbox-svg	复选框未选中状态，应用此svg文件
–radiobutton-checked-svg	复选框选中状态，应用此svg文件
–radiobutton-svg	复选框未选中状态，应用此svg文件
–disable-forms	禁止将HTML表单字段转换为pdf表单字段	默认选项
–enable-forms	允许将HTML表单字段转换为pdf表单字段
–background	打印PDF背景	默认选项
–no-background	不打印PDF背景
–images	允许加载并打印图片	默认选项
–no-images	禁止加载并打印图片

> 链接挑转

选项	描述	默认/值
–disable-external-links	禁用PDF文档中的外部链接生成超链接
–enable-external-links	允许PDF文档中的外部链接生成超链接	默认选项
–disable-internal-links	禁止PDF文档中的内部链接生成超链接
–enable-internal-links	允许PDF文档中的内部链接生成超链接	默认选项
–keep-relative-links	相对路径的外部链接，生成相对路径超链接
–resolve-relative-links	相对路径的外部链接，生成绝对路径超链接	默认选项
–disable-toc-back-links	禁止从节标题链接到目录	默认选项
–enable-toc-back-links	允许从节标题链接到目录

> 文件、缓存、文件加载失败、插件

选项	描述	默认/值	可选值
–allow	加载文件夹中的一个或多个文件		可重复
–disable-local-file-access	禁止本地文件读取加载其他本地文件，除非设置–allow	默认选项
–enable-local-file-access	允许本地文件读取加载其他本地文件
–cache-dir	Web缓存目录
–load-error-handling	web页面加载失败的处理方式	abort	abort, ignore，skip
–load-media-error-handling	媒体文件加载失败的处理方式	ignore	abort, ignore，skip
–disable-plugins	禁用插件	默认选项
–enable-plugins	允许使用插件，但是插件可能不工作

页眉页脚选项

> 页眉页脚通用

选项	描述	默认/值	可选值
–replace	用value值替换[name]变量，适用页眉页脚，不适用–footer-html		可重复

> 页眉

选项	描述	默认/值	可选值
–header-font-name	设置页眉字体	Arial
–header-font-size	设置页眉字号	12
–header-left	页眉左侧插入文本
–header-center	页眉中间插入文本
–header-right	页眉右侧插入文本
–header-html	添加html页面作为页眉
–header-line	页眉下方的显示分割线
–no-header-line	页眉下方的不显示分割线	默认选项
–header-spacing	页眉与内容之间的间距	0	单位mm

> 页脚

选项	描述	默认/值	可选值
–footer-font-name	设置页脚字体	Arial
–footer-font-size	设置页脚字号	12
–footer-left	页脚左侧插入文本
–footer-center	页脚中间插入文本
–footer-right	页脚右侧插入文本
–footer-html	添加html页面作为页脚
–footer-line	页脚上方的显示分割线
–no-footer-line	页脚上方的不显示分割线	默认选项
–footer-spacing	页脚与内容之间的间距	0	单位mm

大纲选项（Outline）

大纲就是PDF阅读器中，用于显示导航跳转的部分

选项	描述	默认/值
–dump-default-toc-xsl	输出默认目录的xsl样式表到命令行面板
–dump-outline	保存大纲内容到文件中
–outline	PDF文件中包含大纲	默认选项
–no-outline	禁止PDF文件阅读器显示大纲内容
–outline-depth	PDF文件中大纲的层级深度	4

xsl是XML 样式表，相当于CSS 是 HTML 样式表

目录选项（TOC）

TOC 是英文table of contents的缩写。

目录是PDF文件中的一个页面，和我们书本中的目录是一个意思。

选项	描述	默认/值
–disable-dotted-lines	目录中标题与页码之间不使用点线
–toc-header-text	目录的头部文字，一般设置为“目录”	Table of Contents
–toc-level-indentation	目录中每一级标题，缩进的宽度	1em
–disable-toc-links	禁止从目录连接到节标题
–toc-text-size-shrink	目录中每一级标题的字号，缩放比例	0.8
–xsl-style-sheet	指定目录使用的xsl样式表，可以自定义目录样式

解释说明

> 页面尺寸

默认的页面尺寸是 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
None

> 页眉页脚

使用 --header-* and --footer-* 选项，可以把页眉、页脚添加到PDF文档中。

在使用一些选项（如 --header-left）设置页眉、页脚的文本字符串中，可以使用以下变量：

这些变量将被替换为相应的值。

变量	简介	说明
[page]	页码	当前正在打印的页数
[frompage]	第一页的页码	要打印的第一页的页码，因为第一页的页码可能不是1
[topage]	总页码	要打印的最后一页的页码
[webpage]	url地址	当前正在打印页面的URL地址
[section]	节名	当前正在打印的节名称
[subsection]	小节名	当前正在打印的小节名称
[date]	当前日期	系统本地格式的当前日期
[isodate]	当前日期	ISO 8601扩展格式的当前日期
[time]	当前时间	系统本地格式的当前时间
[title]	页面标题	当前页面对象的标题
[doctitle]	文档标题	输出文档的标题
[sitepage]	站点页码	当前web页面中正在转换的页面的编号
[sitepages]	站点总页数	当前web页面中正在转换的页面数

例如，在页面右上角显示“当前是第x页|共y页”，设置页眉选项如下：

--header-right "当前是第[page]页|共[topage]页"

页眉、页脚也支持用html文档设置。

例如，通过设置--header-html header.html选项，header.html中内容如下：

  <!DOCTYPE html>
  <html>
    <head>
      <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%">
        <tr>
          <td class="section"></td>
          <td style="text-align:right">
            Page <span class="page"></span> of <span class="topage"></span>
          </td>
        </tr>
      </table>
    </body>
  </html>

从示例中可以看出，参数以GET方式发送到页眉、页脚的html文档,如下形式。

http://www.xxx.com/header.html?page=xxx&frompage=xxx&topage=xxx&webpage=xxx&section=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&section=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

selenium驱动Edge报错解决办法_unable to obtain driver for {options.capabilities[_Dream D的博客-CSDN博客

selenium驱动Edge报错解决办法

selenium使用Edge运行时报错 Message: ‘MicrosoftWebDriver.exe’ executable needs to be in PATH

// An highlighted block
selenium.common.exceptions.WebDriverException: Message: 'MicrosoftWebDriver.exe' executable needs to be in PATH

问题原因：是selenium中写好的驱动文件名和实际的驱动文件名不一致导致的

解决办法：把下载好的驱动文件msedgedriver.exe重命名为MicrosoftWebDriver.exe保存，重新运行即可

posted @ 2023-10-01 10:47 CharyGao 阅读(5891) 评论(0) 编辑收藏举报

刷新页面返回顶部

硅基文明

代码改变不了世界，但是改变世界需要代码。

html转PDF文件，完美解决方案——jsPDF,htmltocanvas,pdfmake,wkhtmltopdf,TuesPechkin,snappy

防止内容被切分

在文档中添加图表

将特定内容单独另起一页

总结

第一次摔键盘：

第二次摔键盘：

wkhtmltopdf 0.12.6 中文文档

说明

概述

基本语法

文档对象

> 页面对象

> 封面对象

> 目录对象

全局选项

> 帮助与输出

> 页面尺寸与方向

> 输出PDF数量

> 颜色图像分辨率

> 其他

页面选项

> HTTP、代理、cookie

> javascript 相关

> 样式、显示、编码

> HTML、图片、背景

> 链接挑转

> 文件、缓存、文件加载失败、插件

页眉页脚选项

> 页眉页脚通用

> 页眉

> 页脚

大纲选项（Outline）

目录选项（TOC）

解释说明

> 页面尺寸

> 从标准输入流中读取参数

> 设置代理

> 页眉页脚

> 大纲

> 目录

联系我们

selenium驱动Edge报错解决办法