前端實(shí)現(xiàn)html轉(zhuǎn)pdf方法總結(jié)

Heier 發(fā)布于2019-08-02 16:04 / 3557人閱讀

摘要：比上面的稍微好點(diǎn)，支持了一些方面的東西，具體看這個(gè)中文配置參數(shù)評(píng)價(jià)這種方法前端實(shí)現(xiàn)，靈活簡(jiǎn)單，而且在頁面還原上是很好的，生成的過程不需要自己操心，頁面樣式還可控，可以說是非常不錯(cuò)的。

最近要搞前端html轉(zhuǎn)pdf的功能。折騰了兩天，略有所收，踩了一些坑，所以做些記錄，為后來的兄弟做些提示，也算是回饋社區(qū)。
經(jīng)過一番調(diào)(sou)研(suo)發(fā)現(xiàn)html導(dǎo)出pdf一般有這幾種方式，各有各有優(yōu)缺，下面簡(jiǎn)單介紹。

這篇文章說了啥

前端實(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)在頁面手動(dòng)Ctrl + P都能將當(dāng)前頁進(jìn)行打印預(yù)覽。在打印預(yù)覽的時(shí)候我們更改打印方式，選擇將頁面保存為PDF即可實(shí)現(xiàn)頁面保存為PDF的功能。
比如此時(shí)我進(jìn)行Ctrl + P就可以看到這個(gè)功能。

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

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

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

只想將頁面的一部分導(dǎo)出為PDF

我們想導(dǎo)出的PDF是A4紙大小

我們想導(dǎo)出的PDF是豎著的

我們還想調(diào)整導(dǎo)出PDF的樣式

...

這些需求通過在對(duì)css中媒體查詢的定義就可以實(shí)現(xiàn)

@media print {
    @page {
        size: A4 portrait; // A4大小 縱向
    }
    
    .other-ele {
        // 打印時(shí)將不需要的元素隱藏
        display: none;
    }
    
    .pdf-title {
        // 只在打印時(shí)候顯示的元素
        display: block;
    }
    
    .panel-sm {
        // 打印時(shí)候改變某些元素的樣式
        margin: 0;
        border: 1px solid #bce8f1;
    }
}

更多的設(shè)置可以參考：CSS 打印

最佳實(shí)踐

需要提醒的是：如果要改變?cè)袠邮剑詈檬窃谠厣?b>新加一個(gè)class或者id來寫，而不是在原有class上寫。比如有這樣一個(gè)元素

我是PDF標(biāo)題

打印時(shí)候要把這個(gè)字體大小設(shè)置成18px的話，我們不能這么寫

@media print{
   .title { // not work
       font-size: 18px;
   }
}

這樣寫試不起作用的。想要生效得在元素上新加一個(gè)class類寫

我是PDF標(biāo)題

@media print{
   .title-print {
       font-size: 18px;
   }
}

經(jīng)過實(shí)踐，這樣寫才可以生效。

庫或者插件

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

PrintArea可以簡(jiǎn)單的實(shí)現(xiàn)部分區(qū)域打印，他的原理是通過把要打印的部分放入一個(gè)新的iframe然后觸發(fā)這個(gè)iframe的print。這個(gè)插件不太穩(wěn)定，會(huì)出現(xiàn)空白，請(qǐng)酌情使用。

jQuery.print比上面的稍微好點(diǎn)，支持了一些css方面的東西，具體看這個(gè)jQuery.print中文配置參數(shù)

評(píng)價(jià)

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

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

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

曲線救國(guó) | 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

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

最佳實(shí)踐

掛幾個(gè)里面遇到的比較坑的錯(cuò)誤

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

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

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

demo的實(shí)現(xiàn)都在這個(gè)examples.js中，沒有混淆，沒有壓縮，可以依葫蘆畫瓢仿一個(gè)demo的表格。

如何生成自己的字體文件

jsPDF-CustomFonts-support默認(rèn)提供了一個(gè)字體文件，但是里面有很多漢字不能正常顯示，所以你需要自己生成一個(gè)字體文件。怎么生生成呢?你需要這樣：

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

這個(gè)錯(cuò)誤是jsPDF-CustomFonts-support中報(bào)出的，是因?yàn)樵?b>1.4.0以下版本的時(shí)候jsPDF還不支持addFileToVFS這個(gè)方法，所以最好的方法是使用最新的jspdf版本
用下面這個(gè)版本的jspdf替換掉報(bào)錯(cuò)的。

Cannot read property "widths" of undefined

這個(gè)錯(cuò)誤是在jsPDF-AutoTable中報(bào)出的，是因?yàn)橥瑫r(shí)引入jspdf.customfonts.min.js和jspdf.customfonts.debug.js這兩個(gè)文件導(dǎo)致的，只引用其中一個(gè)就好了。

jsPDF-AutoTablethead中的中文顯示亂碼

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

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

評(píng)價(jià)

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

后端導(dǎo)出pdf

iText、wkhtmltopdf、prince這三個(gè)都是后端生成pdf的工具。這三個(gè)都沒有node api。故不多說。想看具體的比較可以參考這篇文章html頁面導(dǎo)出為pdf（jsPDF、iText、wkhtmltopdf）。

參考

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...