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

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

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

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

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

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

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

在這里放一段很長(zhǎng)很長(zhǎng)的文件，能觀察到最后生成的PDF會(huì)自動(dòng)分頁(yè)。。。。

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

保存整個(gè)網(wǎng)頁(yè)成PDF

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

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

下面可以看看這個(gè)解決方案的效果。

點(diǎn)這個(gè)按鈕：

這是用JavaScript生成的PDF文件在本地打開(kāi)的效果：

可以看到PDF中的翻頁(yè)沒(méi)有任何問(wèn)題。

大家如果想自己體驗(yàn)一下通過(guò)JavaScript進(jìn)行HTML轉(zhuǎn)PDF的效果，可以試試我的demo：http://i042416.github.io/FioriODataTestTool2014/WebContent/092_html2pdf.html

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

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

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

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。