記一次生成pdf的經歷

繼上次踩完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;
}
複製代碼

如今就很perfect了

百度地圖

我想把地圖轉成成圖片，可是經過百度地圖返回的所有都是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;
}
複製代碼

你本地的效果的是三列水印，這也是你指望的效果，但最後出來的效果可能只有兩列

因此設置的時候要根據實際生成pdf的尺寸去調整水平平鋪的樣式，打開開發者調試工具，將頁面的寬度調整到和生成pdf後的樣式差很少的寬度（也就是上面兩條的狀況），而後調樣式，效果更佳哦，封面樣式的調試也是同理。