這篇文章說了啥
-
前端實現(xiàn)(著重)
-
后端實現(xiàn)(湊數(shù))
正文
通過打印預(yù)覽實現(xiàn)
介紹
通過打印預(yù)覽來實現(xiàn)導(dǎo)出pdf并不是什么稀奇事，一般瀏覽器(Chrome)在頁面手動Ctrl + P都能將當(dāng)前頁進(jìn)行打印預(yù)覽恰聘。在打印預(yù)覽的時候我們更改打印方式魂挂，選擇將頁面保存為PDF即可實現(xiàn)頁面保存為PDF的功能。
比如此時我進(jìn)行Ctrl + P就可以看到這個功能慧邮。
[圖片上傳失敗...(image-7d8b2f-1566226413651)]
程序中實現(xiàn)這個則要靠下面這個方法來實現(xiàn)：
window.print(); // 在控制臺執(zhí)行print()也能看到上面打印預(yù)覽的效果
當(dāng)然能導(dǎo)出PDF只是主要需求调限，我們還有一些其他的需求
- 只想將頁面的一
部分導(dǎo)出為PDF - 我們想導(dǎo)出的PDF是
A4紙大小 - 我們想導(dǎo)出的PDF是
豎著的 - 我們還想調(diào)整導(dǎo)出PDF的
樣式 - ...
這些需求通過在對css中媒體查詢的定義就可以實現(xiàn)
@media print {
@page {
size: A4 portrait; // A4大小 縱向
}
.other-ele {
// 打印時將不需要的元素隱藏
display: none;
}
.pdf-title {
// 只在打印時候顯示的元素
display: block;
}
.panel-sm {
// 打印時候改變某些元素的樣式
margin: 0;
border: 1px solid #bce8f1;
}
}
更多的設(shè)置可以參考：CSS 打印
最佳實踐
需要提醒的是：如果要改變原有樣式舟陆，最好是在元素上新加一個class或者id來寫，而不是在原有class上寫耻矮。比如有這樣一個元素
<h1 class="title">我是PDF標(biāo)題</h1>
打印時候要把這個字體大小設(shè)置成18px的話秦躯，我們不能這么寫
@media print{
.title { // not work
font-size: 18px;
}
}
這樣寫試不起作用的。想要生效得在元素上新加一個class類寫
<h1 class="title title-print">我是PDF標(biāo)題</h1>
@media print{
.title-print {
font-size: 18px;
}
}
經(jīng)過實踐裆装，這樣寫才可以生效踱承。
庫或者插件
有人可能覺得這樣寫略有麻煩，別擔(dān)心哨免，總有人會讓麻煩的事情變得簡單茎活，這個人如果不是你，那就一定是他琢唾。
基于window.print()有人封裝了一些插件：
- PrintArea可以簡單的實現(xiàn)部分區(qū)域打印载荔，他的原理是通過把要打印的部分放入一個新的iframe然后觸發(fā)這個iframe的print。這個插件不太穩(wěn)定采桃，會出現(xiàn)空白懒熙，請酌情使用。
- jQuery.print比上面的稍微好點普办，支持了一些css方面的東西工扎，具體看這個jQuery.print中文配置參數(shù)
評價
這種方法前端實現(xiàn)，靈活簡單衔蹲，而且在頁面還原上是很好的定庵，生成pdf的過程不需要自己操心，頁面樣式還可控踪危，可以說是非常不錯的蔬浙。但是因為瀏覽器對print方法的支持不一(具體支持情況戳這里)，所以目前也就只能在Chrome上用用贞远。另外畴博，這個方法還需要用戶點一下保存按鈕，用戶體驗上也不太好。
通過jsPdf實現(xiàn)
介紹
jsPdf是一個可以把html轉(zhuǎn)成pdf的插件，有人多人在用僚祷。但是吧宁脊，老外做的很多東西沒考慮過英文之外的語言(這個可以理解，我要做個啥肯定也是做成中文的爪瓜，我才不考慮啥日語英語阿拉伯語呢)，這個東西也不例外的不支持中文，那咋辦呢溢吻，很多兄弟想了辦法：
曲線救國 | html2canvas + jsPdf
既然你不支持中文，勞資也懶得跟你廢話，勞資我把頁面轉(zhuǎn)成圖片促王，怕不怕犀盟，圖片再導(dǎo)出PDF照樣中！這種方式很常見蝇狼、很省事阅畴，問題也很多圖片拉伸、模糊迅耘，最重要這樣導(dǎo)出的PDF是沒有靈魂的贱枣，因為他里面的內(nèi)容都是圖片，不能復(fù)制颤专。因為沒有靈魂冯事，所以我沒有采用這種方法，如果你喜歡這種可以參照這篇文章Javascript 將html轉(zhuǎn)成pdf,下載,支持多頁哦（html2canvas 和 jsPDF）血公，寫的很詳細(xì)昵仅。
硬生生支持 | jsPDF-CustomFonts-support
既然你不支持其他語言是吧，那我寫個插件出來搞到你支持為止累魔。干這活兒的是一個來自韓國的哥們兒摔笤，他寫一個可以支持其他語言的插件jsPDF-CustomFonts-support。原理大概就是利用把你提供的字體文件轉(zhuǎn)成base64格式垦写，然后做成一個js文件吕世，拿這個js文件當(dāng)做字庫。恩梯投，我喜歡這種強上的做法命辖。而且這樣導(dǎo)出的pdf內(nèi)容是可以復(fù)制的，簡直驚喜分蓖。于是尔艇，我采用了這樣的方式。
我當(dāng)時是順著這哥們兒的道往前走的jsPDF生成pdf文件和中文編碼么鹤，這個過程是非常曲折與動人的终娃，具體不表，只講里面遇到的問題蒸甜。
最佳實踐
掛幾個里面遇到的比較坑的錯誤
-
jsPdf官網(wǎng)的api文檔打不開
雖然文檔頁面打不開棠耕，但是在他的github倉庫里是有docs這個目錄的，而且目錄下也有文檔柠新，那我們就把這個倉庫下載來窍荧，在本地打開docs/index.html來查看文檔，效果是一樣的恨憎。
[圖片上傳失敗...(image-dfcf11-1566226413650)]
-
jsPDF-AutoTabledemo的表格做的很好看蕊退，但是他沒有提供代碼，那我怎么看到他是怎么實現(xiàn)的？
[圖片上傳失敗...(image-72b716-1566226413650)]
demo的實現(xiàn)都在這個examples.js中咕痛，沒有混淆痢甘，沒有壓縮喇嘱，可以依葫蘆畫瓢仿一個demo的表格茉贡。
- 如何生成自己的字體文件
jsPDF-CustomFonts-support默認(rèn)提供了一個字體文件，但是里面有很多漢字不能正常顯示者铜，所以你需要自己生成一個字體文件腔丧。怎么生生成呢?你需要這樣：
git clone https://github.com/sphilee/jsPDF-CustomFonts-support
cd jsPDF-CustomFonts-support
npm install
mv fontFilePath/fontName.ttf ./jsPDF-CustomFonts-support/fonts/ # 把你準(zhǔn)備的`.ttf`格式字體，放入`jsPDF-CustomFonts-support/fonts/`目錄下
node makeFonts.js
然后jsPDF-CustomFonts-support/dist/default_vfs.js就是你要的字體文件作烟。
- Uncaught TypeError: jsPDFAPI.addFileToVFS is not a function
這個錯誤是jsPDF-CustomFonts-support中報出的愉粤，是因為在1.4.0以下版本的時候jsPDF還不支持addFileToVFS這個方法，所以最好的方法是使用最新的jspdf版本
用下面這個版本的jspdf替換掉報錯的拿撩。
<script src="https://unpkg.com/jspdf@latest/dist/jspdf.min.js"></script>
- Cannot read property 'widths' of undefined
這個錯誤是在jsPDF-AutoTable中報出的衣厘，是因為同時引入jspdf.customfonts.min.js和jspdf.customfonts.debug.js這兩個文件導(dǎo)致的，只引用其中一個就好了压恒。
-
jsPDF-AutoTablethead中的中文顯示亂碼
這個問題我找不到原因影暴，但是我找到了一個方法: 隱藏掉thead，通過在tbody中將第一排tr設(shè)置樣式來模擬thead探赫。實現(xiàn)如下：
doc.autoTable(columns, data, {showHeader: 'never'}); // 不顯示thead
評價
html2canvas + jsPdf的方法直接圖轉(zhuǎn)pdf型宙，簡單，但是質(zhì)量差點伦吠。
jsPDF-CustomFonts-support的方法雖然質(zhì)量上占優(yōu)勢妆兑，但那個字體文件動輒好幾兆，甚至十幾兆毛仪，這對于前端來說是一個不小的開銷搁嗓，對性能影響太。
此外箱靴，這兩種方式導(dǎo)出PDF都是點一下導(dǎo)出就會下載文件的谱姓，不需要用戶再次確認(rèn)下載，這點用戶體驗還是比較好的刨晴。
后端導(dǎo)出pdf
iText屉来、wkhtmltopdf、prince這三個都是后端生成pdf的工具狈癞。這三個都沒有node api茄靠。故不多說。想看具體的比較可以參考這篇文章html頁面導(dǎo)出為pdf（jsPDF蝶桶、iText慨绳、wkhtmltopdf）。
https://segmentfault.com/a/1190000016324962#articleHeader2
參考
https://segmentfault.com/a/11...
https://segmentfault.com/a/11...
https://segmentfault.com/a/11...
https://blog.csdn.net/JodenHe...
https://blog.csdn.net/huyuyan...
