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

animabear 發(fā)布于2019-08-23 12:32 / 3814人閱讀

摘要：前端開發(fā)的朋友們可能會遇到這個需求將您負責開發(fā)的網(wǎng)頁的全部內(nèi)容，包括文字和圖片，一起保存成一個文件。在您的前端頁面里畫一個按鈕，用于觸發(fā)將當前網(wǎng)頁保存成文件的事件。

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

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

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

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

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

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

下面是網(wǎng)頁內(nèi)容：

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

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

HTML轉(zhuǎn)PDF的代碼如下：

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

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

點這個按鈕：

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

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

大家如果想自己體驗一下通過JavaScript進行HTML轉(zhuǎn)PDF的效果，可以試試我的demo：http://i042416.github.io/Fior...

這個解決方案最初是一位叫l(wèi)inwalker的程序員設計的，下面是他的github鏈接：

https://github.com/linwalker/...

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

云服務器 GPU云服務器保存成圖片 js 保存當前頁面數(shù)據(jù)類型 java將pdf轉(zhuǎn)成圖片將文字轉(zhuǎn)換成語音的軟件

文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/98708.html

Javascript 將html轉(zhuǎn)成pdf,下載,支持多頁哦（html2canvas 和 jsPDF

摘要：最近碰到個需求，需要把當前頁面生成，并下載。但這并不是真的截圖，而是通過遍歷頁面結(jié)構(gòu)，收集所有元素信息及相應樣式，渲染出。由于只能將它能處理的生成，因此渲染出來的結(jié)果并不是與原來一致。最近碰到個需求，需要把當前頁面生成pdf，并下載。弄了幾天，自己整理整理，記錄下來，我覺得應該會有人需要：）項目源碼地址：https://github.com/linwalker/... html2...

macg0406 2019-08-20 16:05 評論0 收藏0
Javascript 將html轉(zhuǎn)成pdf,下載,支持多頁哦（html2canvas 和 jsPDF

摘要：最近碰到個需求，需要把當前頁面生成，并下載。但這并不是真的截圖，而是通過遍歷頁面結(jié)構(gòu)，收集所有元素信息及相應樣式，渲染出。由于只能將它能處理的生成，因此渲染出來的結(jié)果并不是與原來一致。最近碰到個需求，需要把當前頁面生成pdf，并下載。弄了幾天，自己整理整理，記錄下來，我覺得應該會有人需要：）項目源碼地址：https://github.com/linwalker/... html2...

codecraft 2019-08-01 16:43 評論0 收藏0
前端實現(xiàn)html轉(zhuǎn)pdf方法總結(jié)

摘要：比上面的稍微好點，支持了一些方面的東西，具體看這個中文配置參數(shù)評價這種方法前端實現(xiàn)，靈活簡單，而且在頁面還原上是很好的，生成的過程不需要自己操心，頁面樣式還可控，可以說是非常不錯的。最近要搞前端html轉(zhuǎn)pdf的功能。折騰了兩天，略有所收，踩了一些坑，所以做些記錄，為后來的兄弟做些提示，也算是回饋社區(qū)。經(jīng)過一番調(diào)(sou)研(suo)發(fā)現(xiàn)html導出pdf一般有這幾種方式，各有各有優(yōu)...

Heier 2019-08-02 16:04 評論0 收藏0
前端實現(xiàn)html轉(zhuǎn)pdf方法總結(jié)

摘要：比上面的稍微好點，支持了一些方面的東西，具體看這個中文配置參數(shù)評價這種方法前端實現(xiàn)，靈活簡單，而且在頁面還原上是很好的，生成的過程不需要自己操心，頁面樣式還可控，可以說是非常不錯的。最近要搞前端html轉(zhuǎn)pdf的功能。折騰了兩天，略有所收，踩了一些坑，所以做些記錄，為后來的兄弟做些提示，也算是回饋社區(qū)。經(jīng)過一番調(diào)(sou)研(suo)發(fā)現(xiàn)html導出pdf一般有這幾種方式，各有各有優(yōu)...

gekylin 2019-08-29 16:40 評論0 收藏0
前端實現(xiàn)html轉(zhuǎn)pdf方法總結(jié)

摘要：比上面的稍微好點，支持了一些方面的東西，具體看這個中文配置參數(shù)評價這種方法前端實現(xiàn)，靈活簡單，而且在頁面還原上是很好的，生成的過程不需要自己操心，頁面樣式還可控，可以說是非常不錯的。最近要搞前端html轉(zhuǎn)pdf的功能。折騰了兩天，略有所收，踩了一些坑，所以做些記錄，為后來的兄弟做些提示，也算是回饋社區(qū)。經(jīng)過一番調(diào)(sou)研(suo)發(fā)現(xiàn)html導出pdf一般有這幾種方式，各有各有優(yōu)...

yvonne 2019-08-23 11:51 評論0 收藏0