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

時間 2019-11-19

標籤使用 javascript 當前頁面保存 pdf 支持圖片文字欄目 JavaScript 简体版

原文原文鏈接

前端開發的朋友們可能會遇到這個需求：將您負責開發的網頁的所有內容，包括文字和圖片，一塊兒保存成一個PDF文件。若是採用屏幕截圖的話，默認Windows操做系統的截圖按鈕沒法完整截取超過一屏幕的屏幕內容。javascript

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

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

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

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

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

下面是網頁內容：canvas

<html>瀏覽器

<p>在這裏放一段很長很長的文件，能觀察到最後生成的PDF會自動分頁。。。。</p>操作系統

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

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

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連接：

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。