前端實現html轉pdf方法總結

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

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

後端實現(湊數)

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

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

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

window.print(); // 在控制台執行print()也能看到上面列印預覽的效果

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

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

@media print 

.other-ele 
.pdf-title 
.panel-sm 
}

@media print

}

@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中報出的，是因為在1.4.0以下版本的時候jspdf還不支援addfiletovfs這個方法，所以最好的方法是使用最新的jspdf版本

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

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

doc.autotable(columns, data, ); // 不顯示thead

itext、wkhtmltopdf、prince這三個都是後端生成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 ...