使用 wkhtmltopdf 将网页生成 带有 封面 、 目录、水印的pdf

上一个迭代任务是将一个html网页转换成pdf。现有系统转pdf的插件是 TCPDF，但是这个插件太老旧了，支持的css样式和html标签太少。在尝试用TCPDF写了两天之后果断放弃了。

然后换成了wkhtmltopdf，不得不说 wkhtmltopdf 最后完美得把网页转成了pdf。接下来我会写关于这次生成pdf 用到的知识点。

wkhtmltopdf 是一个使用 Qt WebKit 引擎做渲染的，能够把html 文档转换成 pdf 文档 或 图片(image) 的命令行工具。（强调一下：是“命令行工具”）

参考以下文章：

HTML 转 PDF 之 wkhtmltopdf 工具简介： https://www.jianshu.com/p/559c594678b6

HTML 转 PDF 之 wkhtmltopdf 工具精讲 ： https://www.jianshu.com/p/4d65857ffe5e

1、封面：

封面是可以自定义的，我另外写了一个html页面当作这个pdf的封面，然后用命令加进去。

比如：cover.html 是我写的封面，效果如下图：

​​​​​​

然后生成pdf封面的命令是这个：wkhtmltopdf cover http://api-dev.inboyu.com/pdf-helper/cover?accessToken=d7018f0675f93468a709bce767104312

其中：http://api-dev.inboyu.com/pdf-helper/cover?accessToken=d7018f0675f93468a709bce767104312 是这个cover.html访问路径。accessToken 是返回页面上标题和申请人所需要的参数。

2、页眉、页脚

页眉、页脚也可以 像封面一样 添加一个html作为的。不过我没有试过，我直接用了wkhtmltopdf 提供的命令。

wkhtmltopdf --header-left "XXX有限公司" --header-right "[date] [time] 机密文件请勿外传" --header-line --header-spacing 3 --footer-spacing 3 --footer-center "- 第 [page] 页-"

3、目录

这次迭代的重头戏就是这个目录了，也是因为目录TCPDF不知道怎么实现（或者根本实现不了）才换成了wkhtmltopdf的。

我们最后生成的目录是下图这样子的：

​​​

看起来是不是比pdf带的侧边栏书签帅？哈哈

那这个目录又是怎么实现呢？

这里需要注意的是：太新的wkhtmltopd版本不支持，我用的是 wkhtmltopdf 0.12.3。

然后目录是根据网页中的H1、H2...标签来确定的。所以网页中要准备好。

接下来就是一行命令的事情：

wkhtmltopdf toc

所以综上所述，我将网页生成一个 拥有 自定义封面、目录、页眉、页脚的pdf的所有命令如下：

wkhtmltopdf --header-left "XXX科技有限公司" --header-right "[date] [time] 机密文件请勿外传" --header-line --header-spacing 3 --footer-spacing 3 --footer-center "- 第 [page] 页-" cover http://api-dev.inboyu.com/pdf-helper/cover?accessToken=d7018f0675f93468a709bce767104312 toc --toc-header-text "目录" https://api-test.inboyu.com/pdf-helper/get-project-expand-html?accessToken=d7018f0675f93468a709bce767104312 D:\\1.pdf

备注：

1、--toc-header-text "目录" 将目录变成中文，不然是contents。

2、http://api-test.inboyu.com/pdf-helper/get-project-expand-html?accessToken=d7018f0675f93468a709bce767104312 是后端获取要转pdf的一个接口地址。它拿到的是要转pdf的网页的所有html。

3、D:\\1.pdf 是存放pdf的地址，因为在本地调试，所以我存在了D盘目录下

就这样简单，转换出来的pdf 和 网页几乎一摸一样。

工具运行命令行如下：

工具运行命令

另外：

1、页面的布局主要是table布局在pdf中可能会切断的问题，解决方法：

tr{page-break-inside: avoid;}

2、利用 page-break-before: left; 让以下三个

将会在生成的pdf中都新开一页。

3、我在我的pdf中还加上了水印，貌似wkhtmltopdf不提供水印方法（还是我没有找到，如果有人使用了wkhtmltopdf提供的方法，希望能告诉我一下，谢谢了！）

我的做法是切一张水印的图片，比如下面这个：

​​​

然后加在这个网页的最外层的父元素上作为背景，然后repeat这个背景，比如：

    //网页内容

    //网页内容

    //网页内容

最后实现了水印的效果，需要提醒一下的是，做水印的时候有可能我们网页的效果和pdf的效果有差距，我调试的时候是遇到了，明明网页上的水印好好的，但是生成了pdf之后 水印的间距会有变差。这个时候，可以把你的网页窗口调整大小，使得你的网页趋紧生成的pdf，再调整水印，这样最后生成的pdf才是准确的，包括前面的提到的封面也可以这么调试（如果有偏差）。

我的pdf水印效果如下：

​​​

4、如果有图表，看到别人说加上animation: false; 禁止动画就可以显示出来了，不然生成的pdf里的图表会是空白。

或者是（我用的方法）：

1、先用

结合echarts生成一个图表。

2、然后调用echarts的getDataURL方法生成一个图片地址放到

let echartKLine = echarts.init($('.js-kline'));

    echartKLine.setOption(option);

    window.onresize = echartKLine.resize;

    $("#js-img").attr("src",echartKLine.getDataURL())

最后隐藏 js-kline，显示 js-img。

相当于把图表变成了和这个图表长得一摸一样的图片。

到这里，基本所有的问题都涉及到了。生成的pdf几乎和网页一摸一样。

这是我在写的第一篇文章，不知道怎么插入代码，尴尬。。。见谅！