🔧 阿川の電商水電行
弃用html2pdf.js,這個html轉pdf方案能力是它的幾十倍
歡迎轉載文章
在前端開發中，“把網頁變成 PDF”是一個老生常談的需求。無論是生成發票、報告還是履歷，使用者總希望點一下按鈕就能帶走一份格式完美的文檔。
目前主流的前端html轉pdf方案是透過html2canvas將網頁渲染成canvas，再通過jsPDF將canvas轉換為pdf。代表方案就是 html2pdf.js，npm包周下載量達到了80萬，為廣大開發者所接受。但是因為它基於html2canvas和jsPDF，會有一些無法解決的問題，比如：
- 生成速度慢
- 生成的pdf文件體積大
- 生成的pdf內容會模糊，打印時無法達到清晰度要求
- 文字無法被搜索、選中、編輯，因為它生成的pdf是圖片式的，而非矢量pdf
而現在，有一種全新的解決思路，完美的解決了這些問題，那就是作者開源的前端pdf生成庫 dompdf.js，具體的實現和說明可以查看我 上一篇文章
在線體驗
Git 倉庫地址 (歡迎 Star⭐⭐⭐)
dompdf.js的大致原理
- 解析 html 頁面，生成一個包含節點位置信息、樣式、層級、內容等信息的 DOM 樹。
- 遞歸 DOM 樹，根據節點自頂部的高度和生成頁面規格的高度，將節點分配到不同的頁面。
- 呼叫 jspdf.js 的 api,將節點繪製到 PDF 文件上。
可以看出，dompdf.js 跳過了html轉圖片的步驟，直接將 DOM 樹轉換為矢量 PDF 文件，避免了圖片轉換導致的模糊問題，同時也解決了文字無法被搜索、選中、編輯的問題。
下面，我們從pdf生成速度、生成質量、生成數量等方面對兩種方案進行對比
測試的內容為生成包含文本和表格的pdf文件
1.文件生成速度對比
同樣的內容，dompdf.js 生成速度更快，耗時基本上只有 html2pdf.js 的 1/2。
2.文件體積對比
dompdf.js 生成的 pdf 文件體積更小，同樣的內容頁數，dompdf.js 生成的 pdf 文件體積是 html2pdf.js 的 1/5 左右。
3.清晰度對比
在放大到500%後，html2pdf.js 生成的 pdf 文字會出現明顯的鋸齒，而 dompdf.js 生成的 pdf 文字則完全沒有壓力。
html2pdf.js生成的pdf文件，放大後會有鋸齒
dompdf.js生成的矢量文件，不會出現模糊的情況
4.生成數量對比
html2pdf.js在30頁左右，由於canvas高度限制，就會出現空白頁，而 dompdf.js 輕鬆可以生成數百上千頁的pdf。
html2pdf.js生成的pdf文件，內容過多會出現空白頁
dompdf.js輕鬆可以生成數百上千頁pdf
總結
通過上述對比可以看出，dompdf.js 在各項指標上都完勝傳統的 html2pdf.js 方案。它不僅解決了 html2canvas 帶來的模糊、體積大、無法選中文字等痛點，還大幅提升了生成速度和頁面承載能力。
對於需要高質量、可編輯、且對性能有要求的前端 PDF 生成場景，dompdf.js 無疑是目前更優的選擇。
如果你也被前端生成 PDF 的各種坑所困擾，不妨試一試這個庫，希望能夠幫助到你！
別忘了去 GitHub 點個 Star 支持一下作者哦！⭐⭐⭐
GitHub: github.com/lmn1919/dom…
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
