继上次踩完h5的坑后，迎来了新需求，需要生成pdf，内容包括封面，目录，然后就是正文，正文的内容包括，页眉，页脚，图表，表格，图片，地图，很多地方要根据字段值的不同有不同的显示，也就是内容不固定。
最后实现的效果
使用的框架
jspdf （放弃）
在网上搜到有关于jspdf的问题大致是布局比较死板,无法转换图片,分页效果差。然后就直接弃用了。（有掘友说，jspdf 这个也还行啊，结合html2canvas，也能实现一些基本的需求，目录和页眉和页脚的实现有待研究 ）
tcpdf （第一版）
公司之前用的是这个插件，但是这个05年后就没有再维护了，我们第一版写的时候，虽然按需求大致上的内容的都是实现了，当然实现的过程痛苦，首先所有的布局都只能使用table布局，为什么不用padding，margin之类的呢，因为不支持啊（想哭），然后目录的问题，一开始我考虑的是前端可以通过计算每一个标题距离顶部的高度，在通过生成的pdf页面的高度去计算，标题所在的页面，but，很不准，dom计算的高度和最终pdf生成的高度差很多
wkhtmltopdf （最终版）
这个框架好啊，简单好用，基本支持前端的大部分css，除了目录有坑（只有低版本支持分页，我们现在用的是wkhtmltopdf 0.12.3版本），封面需要单独写一个页面，目录只要命令就能生成，前提是代码对应的标题要用h1标签包裹，最后生成的目录除了样式没法控制，其他都挺好的，而且点击目录的标题还能跳转到对应的标题所在的页面。下面是核心代码
//生成pdf命令
wkhtmltopdf --page-width 210mm --page-height 297mm --margin-top 15mm --header-left "这里是你的表头啦左边啦" --header-right "[date] [time] 机密文件请勿外传" --header-line --header-spacing 3 --footer-spacing 3 --footer-center "- 第 [page] 页-" cover 这里是你提前写好的封面的地址 toc --toc-header-text "目录" 这里是你要生成pdf的地址 D:\\1.pdf
复制代码// 页面的h1标签
<h1 class="item-title">
项目信息
</h1>
复制代码需要注意的点
table跨页的时候会被分割
生成的 PDF 在分页处如下的效果
table{
page-break-before: left;
}
复制代码百度地图
我想把地图转成成图片，但是通过百度地图返回的全部都是html，而且里面的地图图片全部都是一张一张拼起来的,就算是通过html2canvas截屏也不行。最后让后端查看百度地图的文档，直接输出地图的png的链接过来。
echarts图表
因为图表是cavans,所以我们要将它转换成图片赋值给一个img标签
let echartKLine = echarts.init(this.$el.querySelector('.js-kline'));
echartKLine.setOption(_option);
$("#"+this.mykey).attr("src",echartKLine.getDataURL())//通过getDataURL的方法
复制代码水印
水印找了一种简单的方法，就是给整个pdf的最外层，通过background的方法平铺。
.pdfContainer{
background-image: url('背景图片地址');
background-size: 300px;
}
复制代码