這篇文章說了啥

• 前端實(shí)現(xiàn)(著重)

  • 通過打印預(yù)覽實(shí)現(xiàn)
  • 通過插件jsPdf實(shí)現(xiàn)

• 后端實(shí)現(xiàn)(湊數(shù))

  • iText、wkhtmltopdf、prince

正文

通過打印預(yù)覽實(shí)現(xiàn)

介紹

通過打印預(yù)覽來實(shí)現(xiàn)導(dǎo)出pdf并不是什么稀奇事，一般瀏覽器(Chrome)在頁面手動Ctrl + P都能將當(dāng)前頁進(jìn)行打印預(yù)覽。在打印預(yù)覽的時候我們更改打印方式，選擇將頁面保存為PDF即可實(shí)現(xiàn)頁面保存為PDF的功能。
比如此時我進(jìn)行Ctrl + P就可以看到這個功能。

[圖片上傳失敗...(image-7d8b2f-1566226413651)]

程序中實(shí)現(xiàn)這個則要靠下面這個方法來實(shí)現(xiàn)：

window.print(); // 在控制臺執(zhí)行print()也能看到上面打印預(yù)覽的效果

當(dāng)然能導(dǎo)出PDF只是主要需求，我們還有一些其他的需求

1. 只想將頁面的一部分導(dǎo)出為PDF
2. 我們想導(dǎo)出的PDF是A4紙大小
3. 我們想導(dǎo)出的PDF是豎著的
4. 我們還想調(diào)整導(dǎo)出PDF的樣式
5. ...

這些需求通過在對css中媒體查詢的定義就可以實(shí)現(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 打印

最佳實(shí)踐

需要提醒的是：如果要改變原有樣式，最好是在元素上新加一個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)過實(shí)踐，這樣寫才可以生效。

庫或者插件

有人可能覺得這樣寫略有麻煩，別擔(dān)心，總有人會讓麻煩的事情變得簡單，這個人如果不是你，那就一定是他。
基于window.print()有人封裝了一些插件：

• PrintArea可以簡單的實(shí)現(xiàn)部分區(qū)域打印，他的原理是通過把要打印的部分放入一個新的iframe然后觸發(fā)這個iframe的print。這個插件不太穩(wěn)定，會出現(xiàn)空白，請酌情使用。
• jQuery.print比上面的稍微好點(diǎn)，支持了一些css方面的東西，具體看這個jQuery.print中文配置參數(shù)

評價

這種方法前端實(shí)現(xiàn)，靈活簡單，而且在頁面還原上是很好的，生成pdf的過程不需要自己操心，頁面樣式還可控，可以說是非常不錯的。但是因?yàn)闉g覽器對print方法的支持不一(具體支持情況戳這里)，所以目前也就只能在Chrome上用用。另外，這個方法還需要用戶點(diǎn)一下保存按鈕，用戶體驗(yàn)上也不太好。

通過jsPdf實(shí)現(xiàn)

介紹

jsPdf是一個可以把html轉(zhuǎn)成pdf的插件，有人多人在用。但是吧，老外做的很多東西沒考慮過英文之外的語言(這個可以理解，我要做個啥肯定也是做成中文的，我才不考慮啥日語英語阿拉伯語呢)，這個東西也不例外的不支持中文，那咋辦呢，很多兄弟想了辦法：

曲線救國 | html2canvas + jsPdf

既然你不支持中文，勞資也懶得跟你廢話，勞資我把頁面轉(zhuǎn)成圖片，怕不怕，圖片再導(dǎo)出PDF照樣中！這種方式很常見、很省事，問題也很多圖片拉伸、模糊，最重要這樣導(dǎo)出的PDF是沒有靈魂的，因?yàn)樗锩娴膬?nèi)容都是圖片，不能復(fù)制。因?yàn)闆]有靈魂，所以我沒有采用這種方法，如果你喜歡這種可以參照這篇文章Javascript 將html轉(zhuǎn)成pdf,下載,支持多頁哦（html2canvas 和 jsPDF），寫的很詳細(xì)。

硬生生支持 | jsPDF-CustomFonts-support

既然你不支持其他語言是吧，那我寫個插件出來搞到你支持為止。干這活兒的是一個來自韓國的哥們兒，他寫一個可以支持其他語言的插件jsPDF-CustomFonts-support。原理大概就是利用把你提供的字體文件轉(zhuǎn)成base64格式，然后做成一個js文件，拿這個js文件當(dāng)做字庫。恩，我喜歡這種強(qiáng)上的做法。而且這樣導(dǎo)出的pdf內(nèi)容是可以復(fù)制的，簡直驚喜。于是，我采用了這樣的方式。
我當(dāng)時是順著這哥們兒的道往前走的jsPDF生成pdf文件和中文編碼，這個過程是非常曲折與動人的，具體不表，只講里面遇到的問題。

最佳實(shí)踐

掛幾個里面遇到的比較坑的錯誤

• jsPdf官網(wǎng)的api文檔打不開

雖然文檔頁面打不開，但是在他的github倉庫里是有docs這個目錄的，而且目錄下也有文檔，那我們就把這個倉庫下載來，在本地打開docs/index.html來查看文檔，效果是一樣的。

[圖片上傳失敗...(image-dfcf11-1566226413650)]

• jsPDF-AutoTabledemo的表格做的很好看，但是他沒有提供代碼，那我怎么看到他是怎么實(shí)現(xiàn)的？

[圖片上傳失敗...(image-72b716-1566226413650)]

demo的實(shí)現(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中報出的，是因?yàn)樵?code>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中報出的，是因?yàn)橥瑫r引入jspdf.customfonts.min.js和jspdf.customfonts.debug.js這兩個文件導(dǎo)致的，只引用其中一個就好了。

• jsPDF-AutoTablethead中的中文顯示亂碼

這個問題我找不到原因，但是我找到了一個方法: 隱藏掉thead，通過在tbody中將第一排tr設(shè)置樣式來模擬thead。實(shí)現(xiàn)如下：

doc.autoTable(columns, data, {showHeader: 'never'}); // 不顯示thead

評價

html2canvas + jsPdf的方法直接圖轉(zhuǎn)pdf，簡單，但是質(zhì)量差點(diǎn)。
jsPDF-CustomFonts-support的方法雖然質(zhì)量上占優(yōu)勢，但那個字體文件動輒好幾兆，甚至十幾兆，這對于前端來說是一個不小的開銷，對性能影響太。
此外，這兩種方式導(dǎo)出PDF都是點(diǎn)一下導(dǎo)出就會下載文件的，不需要用戶再次確認(rèn)下載，這點(diǎn)用戶體驗(yà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...