前端實現html轉pdf方法總結

2021-09-13 10:44:04 字數 2938 閱讀 7651

最近要搞前端html轉pdf的功能。折騰了兩天,略有所收,踩了一些坑,所以做些記錄,為後來的兄弟做些提示,也算是回饋社群。

經過一番調(sou)研(suo)發現html匯出pdf一般有這幾種方式,各有各有優缺,下面簡單介紹。

後端實現(湊數)

通過列印預覽來實現匯出pdf並不是什麼稀奇事,一般瀏覽器(chrome)在頁面手動ctrl + p都能將當前頁進行列印預覽。在列印預覽的時候我們更改列印方式,選擇將頁面儲存為pdf即可實現頁面儲存為pdf的功能。

比如此時我進行ctrl + p就可以看到這個功能。

程式中實現這個則要靠下面這個方法來實現:

window.print(); // 在控制台執行print()也能看到上面列印預覽的效果
當然能匯出pdf只是主要需求,我們還有一些其他的需求

只想將頁面的一部分匯出為pdf我們想匯出的pdf是a4紙大小我們想匯出的pdf是豎著的我們還想調整匯出pdf的樣式...

這些需求通過在對css中**查詢的定義就可以實現

@media print 

.other-ele

.pdf-title

.panel-sm

}

列印時候要把這個字型大小設定成18px的話,我們不能這麼寫

@media print

}

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

@media print

}

經過實踐,這樣寫才可以生效。

有人可能覺得這樣寫略有麻煩,別擔心,總有人會讓麻煩的事情變得簡單,這個人如果不是你,那就一定是他。

基於window.print()有人封裝了一些外掛程式:

這種方法前端實現,靈活簡單,而且在頁面還原上是很好的,生成pdf的過程不需要自己操心頁面樣式還可控,可以說是非常不錯的。但是因為瀏覽器對print方法的支援不一(具體支援情況戳這裡),所以目前也就只能在chrome上用用。另外,這個方法還需要使用者點一下儲存按鈕,使用者體驗上也不太好

jspdf是乙個可以把html轉成pdf的外掛程式,有人多人在用。但是吧,老外做的很多東西沒考慮過英文之外的語言(這個可以理解,我要做個啥肯定也是做成中文的,我才不考慮啥日語英語阿拉伯語呢),這個東西也不例外的不支援中文,那咋辦呢,很多兄弟想了辦法:

曲線救國 | html2canvas + jspdf

硬生生支援 | jspdf-customfonts-support掛幾個裡面遇到的比較坑的錯誤

demo的實現都在這個examples.js中,沒有混淆,沒有壓縮,可以依葫蘆畫瓢仿乙個demo的**。

jspdf-customfonts-support預設提供了乙個字型檔案,但是裡面有很多漢字不能正常顯示,所以你需要自己生成乙個字型檔案。怎麼生生成呢?你需要這樣:

git clone 

cd jspdf-customfonts-support

npm install

mv fontfilepath/fontname.ttf ./jspdf-customfonts-support/fonts/ # 把你準備的`.ttf`格式字型,放入`jspdf-customfonts-support/fonts/`目錄下

node makefonts.js

然後jspdf-customfonts-support/dist/default_vfs.js就是你要的字型檔案。

這個錯誤是jspdf-customfonts-support中報出的,是因為在1.4.0以下版本的時候jspdf還不支援addfiletovfs這個方法,所以最好的方法是使用最新的jspdf版本

用下面這個版本的jspdf替換掉報錯的。

這個錯誤是在jspdf-autotable中報出的,是因為同時引入jspdf.customfonts.min.jsjspdf.customfonts.debug.js這兩個檔案導致的,只引用其中乙個就好了。

這個問題我找不到原因,但是我找到了乙個方法: 隱藏掉thead,通過在tbody中將第一排tr設定樣式來模擬thead。實現如下:

doc.autotable(columns, data, ); // 不顯示thead
評價itextwkhtmltopdfprince這三個都是後端生成pdf的工具。這三個都沒有node api。故不多說。想看具體的比較可以參考這篇文章html頁面匯出為pdf(jspdf、itext、wkhtmltopdf)。

前端實現html轉pdf方法總結

最近要搞前端html轉pdf的功能。折騰了兩天,略有所收,踩了一些坑,所以做些記錄,為後來的兄弟做些提示,也算是回饋社群。經過一番調 sou 研 suo 發現html匯出pdf一般有這幾種方式,各有各有優缺,下面簡單介紹。後端實現 湊數 通過列印預覽來實現匯出pdf並不是什麼稀奇事,一般瀏覽器 ch...

關於HTML轉Pdf心得

html轉成pdf是為了客戶的要求以及顯示的需要,所以我們要將頁面進行轉化。list item 首先是pechkin 這個方法是很好用的,自己加的css樣式都可以接收到,但是由於他的版本比較低,list item 第二個是itextsharp這個外掛程式 這個是我用到的遇到問題最多的,而且侷限性多,...

C Word文件轉PDF的實現

private string adobepdfprint adobe pdf private string adobedisprint acrobat distiller private string regroot software adobe acrobat distiller private ...