使用JavaScript將當前頁面儲存成PDF，支援圖片和文字的儲存

i042416發表於2018-09-10
JavaScript

前端開發的朋友們可能會遇到這個需求：將您負責開發的網頁的全部內容，包括文字和圖片，一起儲存成一個PDF檔案。如果採用螢幕截圖的話，預設Windows作業系統的截圖按鈕無法完整擷取超過一螢幕的螢幕內容。

我在網上找了一段時間，蒐集到了一些解決方案，在這裡分享給廣大程式設計師。

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

1. 遍歷當前網頁的DOM結構，收集所有DOM樹上每個節點的元素資訊及相應樣式，渲染出canvas影像。這個遍歷和渲染操作封裝在指令碼檔案html2canvas.js裡。

2. 利用一個開源的JavaScript庫，jsPDF，在瀏覽器端用JavaScript生成PDF檔案。PDF的生成邏輯封裝在指令碼檔案jsPdf.debug.js裡。

看看如何在您的前端網頁裡使用這兩個JavaScript檔案。

<script type="text/javascript" src="html2pdf/html2canvas.js"></script>

<script type="text/javascript" src="html2pdf/jsPdf.debug.js"></script>

下面是網頁內容：

<html>

<p>在這裡放一段很長很長的檔案，能觀察到最後生成的PDF會自動分頁。。。。</p>

在您的前端頁面裡畫一個按鈕，用於觸發將當前網頁儲存成PDF檔案的事件。

<button id="renderPdf">儲存整個網頁成PDF</button>

HTML轉PDF的程式碼如下：

使用JavaScript將當前頁面儲存成PDF，支援圖片和文字的儲存

如果想下載可以複製貼上的程式碼文字，可以到這個連結下載。 https://github.com/linwalker/render-html-to-pdf

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

點這個按鈕：

使用JavaScript將當前頁面儲存成PDF，支援圖片和文字的儲存

這是用JavaScript生成的PDF檔案在本地開啟的效果：

使用JavaScript將當前頁面儲存成PDF，支援圖片和文字的儲存

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

使用JavaScript將當前頁面儲存成PDF，支援圖片和文字的儲存

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

這個解決方案最初是一位叫linwalker的程式設計師設計的，下面是他的github連結：

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

使用JavaScript將當前頁面儲存成PDF，支援圖片和文字的儲存

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


使用JavaScript將當前頁面儲存成PDF，支援圖片和文字的儲存

使用JavaScript將當前頁面儲存成PDF，支援圖片和文字的儲存


來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/24475491/viewspace-2213926/，如需轉載，請註明出處，否則將追究法律責任。

相關文章