上一個迭代任務(wù)是將一個html網(wǎng)頁轉(zhuǎn)換成pdf。現(xiàn)有系統(tǒng)轉(zhuǎn)pdf的插件是?TCPDF雷酪，但是這個插件太老舊了淑仆，支持的css樣式和html標簽太少。在嘗試用TCPDF寫了兩天之后果斷放棄了哥力。
然后換成了wkhtmltopdf蔗怠，不得不說?wkhtmltopdf 最后完美得把網(wǎng)頁轉(zhuǎn)成了pdf。接下來我會寫關(guān)于這次生成pdf 用到的知識點吩跋。
wkhtmltopdf 是一個使用 Qt WebKit 引擎做渲染的寞射，能夠把html 文檔轉(zhuǎn)換成 pdf 文檔 或 圖片(image) 的命令行工具。（強調(diào)一下：是“命令行工具”）
參考以下文章：
HTML 轉(zhuǎn) PDF 之 wkhtmltopdf 工具簡介： http://www.reibang.com/p/559c594678b6
HTML 轉(zhuǎn) PDF 之 wkhtmltopdf 工具精講 ： http://www.reibang.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 是返回頁面上標題和申請人所需要的參數(shù)兰吟。
2、頁眉茂翔、頁腳
頁眉混蔼、頁腳也可以 像封面一樣?添加一個html作為的。不過我沒有試過珊燎，我直接用了wkhtmltopdf 提供的命令惭嚣。
wkhtmltopdf --header-left "XXX有限公司" --header-right "[date] [time] 機密文件請勿外傳" --header-line --header-spacing 3 --footer-spacing 3 --footer-center "- 第 [page] 頁-"
3遵湖、目錄
這次迭代的重頭戲就是這個目錄了，也是因為目錄TCPDF不知道怎么實現(xiàn)（或者根本實現(xiàn)不了）才換成了wkhtmltopdf的晚吞。
我們最后生成的目錄是下圖這樣子的：
???
看起來是不是比pdf帶的側(cè)邊欄書簽帥延旧？哈哈
那這個目錄又是怎么實現(xiàn)呢？
這里需要注意的是：太新的wkhtmltopd版本不支持槽地，我用的是?wkhtmltopdf 0.12.3迁沫。
然后目錄是根據(jù)網(wǎng)頁中的H1、H2...標簽來確定的捌蚊。所以網(wǎng)頁中要準備好集畅。
接下來就是一行命令的事情：
wkhtmltopdf toc
所以綜上所述，我將網(wǎng)頁生成一個 擁有 自定義封面缅糟、目錄挺智、頁眉、頁腳的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 是后端獲取要轉(zhuǎn)pdf的一個接口地址沐扳。它拿到的是要轉(zhuǎn)pdf的網(wǎng)頁的所有html。
3句占、D:\\1.pdf 是存放pdf的地址沪摄，因為在本地調(diào)試，所以我存在了D盤目錄下
就這樣簡單纱烘，轉(zhuǎn)換出來的pdf 和 網(wǎng)頁幾乎一摸一樣杨拐。
工具運行命令行如下：
另外：
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提供的方法山宾，希望能告訴我一下至扰，謝謝了！）
我的做法是切一張水印的圖片资锰，比如下面這個：
???
然后加在這個網(wǎng)頁的最外層的父元素上作為背景敢课，然后repeat這個背景，比如：
<div style="background-image: url('https://vky-test-oss.inboyu.com/upload/39eaa976-fec0-a6f1-f10b-d20fa3da7ae1.png');background-size: 300px;">
? ? //網(wǎng)頁內(nèi)容
? ? //網(wǎng)頁內(nèi)容
? ? //網(wǎng)頁內(nèi)容
</div>
最后實現(xiàn)了水印的效果，需要提醒一下的是直秆，做水印的時候有可能我們網(wǎng)頁的效果和pdf的效果有差距濒募，我調(diào)試的時候是遇到了，明明網(wǎng)頁上的水印好好的圾结，但是生成了pdf之后 水印的間距會有變差瑰剃。這個時候，可以把你的網(wǎng)頁窗口調(diào)整大小疫稿，使得你的網(wǎng)頁趨緊生成的pdf培他，再調(diào)整水印，這樣最后生成的pdf才是準確的遗座，包括前面的提到的封面也可以這么調(diào)試（如果有偏差）舀凛。
我的pdf水印效果如下：
???
4、如果有圖表途蒋，看到別人說加上animation: false; 禁止動畫就可以顯示出來了猛遍，不然生成的pdf里的圖表會是空白。
或者是（我用的方法）：
1号坡、先用 <div class="js-kline" style="width:700px;height:450px;" v-show="isShow"></div> 結(jié)合echarts生成一個圖表懊烤。
2、然后調(diào)用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幾乎和網(wǎng)頁一摸一樣。
這是我在簡書寫的第一篇文章籽慢，不知道怎么插入代碼浸遗，尷尬。箱亿。跛锌。見諒！
