前端開發的朋友們可能會遇到這個需求：將您負責開發的網頁的全部內容，包括文字和圖片，一起保存成一個PDF文件。如果采用屏幕截圖的話，默認Windows操作系統的截圖按鈕無法完整截取超過一屏幕的屏幕內容。

我在網上找了一段時間，搜集到了一些解決方案，在這里分享給廣大程序員。

這個解決方案包含了兩個步驟，將前端頁面轉化為PDF:

1. 遍歷當前網頁的DOM結構，收集所有DOM樹上每個節點的元素信息及相應樣式，渲染出canvas圖像。這個遍歷和渲染操作封裝在腳本文件html2canvas.js里。

2. 利用一個開源的JavaScript庫，jsPDF，在瀏覽器端用JavaScript生成PDF文件。PDF的生成邏輯封裝在腳本文件jsPdf.debug.js里。

看看如何在您的前端網頁里使用這兩個JavaScript文件。

下面是網頁內容：

在這里放一段很長很長的文件，能觀察到最后生成的PDF會自動分頁。。。。

在您的前端頁面里畫一個按鈕，用于觸發將當前網頁保存成PDF文件的事件。

保存整個網頁成PDF

HTML轉PDF的代碼如下：

如果想下載可以復制粘貼的代碼文本，可以到這個鏈接下載。https://github.com/linwalker/render-html-to-pdf

下面可以看看這個解決方案的效果。

點這個按鈕：

這是用JavaScript生成的PDF文件在本地打開的效果：

可以看到PDF中的翻頁沒有任何問題。

大家如果想自己體驗一下通過JavaScript進行HTML轉PDF的效果，可以試試我的demo：http://i042416.github.io/FioriODataTestTool2014/WebContent/092_html2pdf.html

這個解決方案最初是一位叫linwalker的程序員設計的，下面是他的github鏈接：

https://github.com/linwalker/render-html-to-pdf

要獲取更多Jerry的原創技術文章，請關注公眾號"汪子熙"或者掃描下面二維碼:

總結

以上是生活随笔為你收集整理的使用JavaScript将当前页面保存成PDF，支持图片和文字的保存的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。