上一个迭代任务是将一个html网页转换成pdf。现有系统转pdf的插件是 TCPDF，但是这个插件太老旧了，支持的css样式和html标签太少。在尝试用TCPDF写了两天之后果断放弃了。
然后换成了wkhtmltopdf，不得不说 wkhtmltopdf 最后完美得把网页转成了pdf。接下来我会写关于这次生成pdf 用到的知识点。
参考文章：
https://www.jianshu.com/p/559c594678b6
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的网页。
3、D:\\1.pdf 是存放pdf的地址，因为在本地调试，所以我存在了D盘目录下
就这样简单，转换出来的pdf 和 网页几乎一摸一样。
另外：
1、页面的布局主要是table布局在pdf中可能会切断的问题，解决方法：
tr{page-break-inside: avoid;}
2、利用 page-break-before: left; 让以下三个<div></div>将会在生成的pdf中都新开一页。
<div class="page1" style="page-break-before: left;"></div>
<div class="page2" style="page-break-before: left;"></div>
<div class="page3" style="page-break-before: left;"></div>
3、我在我的pdf中还加上了水印，貌似wkhtmltopdf不提供水印方法（还是我没有找到，如果有人使用了wkhtmltopdf提供的方法，希望能告诉我一下，谢谢了！）
我的做法是切一张水印的图片，比如下面这个：
然后加在这个网页的最外层的父元素上作为背景，然后repeat这个背景，比如：
<div style="background-image: url('https://vky-test-oss.inboyu.com/upload/39eaa976-fec0-a6f1-f10b-d20fa3da7ae1.png');background-size: 300px;">
//网页内容
//网页内容
//网页内容
</div>
最后实现了水印的效果，需要提醒一下的是，做水印的时候有可能我们网页的效果和pdf的效果有差距，我调试的时候是遇到了，明明网页上的水印好好的，但是生成了pdf之后 水印的间距会有变差。这个时候，可以把你的网页窗口调整大小，使得你的网页趋紧生成的pdf，再调整水印，这样最后生成的pdf才是准确的，包括前面的提到的封面也可以这么调试（如果有偏差）。
我的pdf水印效果如下：
4、如果有图表，看到别人说加上animation: false; 禁止动画就可以显示出来了，不然生成的pdf里的图表会是空白。
或者是（我用的方法）：
1、先用 <div class="js-kline" style="width:700px;height:450px;" v-show="isShow"></div> 结合echarts生成一个图表。
2、然后调用echarts的getDataURL方法生成一个图片地址放到<img src="" id="js-img">
let echartKLine = echarts.init($('.js-kline'));
echartKLine.setOption(option);
window.onresize = echartKLine.resize;
$("#js-img").attr("src",echartKLine.getDataURL())
最后隐藏 js-kline，显示 js-img。
相当于把图表变成了和这个图表长得一摸一样的图片。
到这里，基本所有的问题都涉及到了。生成的pdf几乎和网页一摸一样。
这是我在简书写的第一篇文章，不知道怎么插入代码，尴尬。。。见谅！
网友评论