本篇內(nèi)容介紹了“如何使用JavaScript將當前頁面保存成PDF”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠?qū)W有所成！

創(chuàng)新互聯(lián)公司IDC提供業(yè)務:西部信息服務器租用,成都服務器租用,西部信息服務器租用,重慶服務器租用等四川省內(nèi)主機托管與主機租用業(yè)務;數(shù)據(jù)中心含:雙線機房,BGP機房,電信機房,移動機房,聯(lián)通機房。

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

1. 遍歷當前網(wǎng)頁的DOM結構，收集所有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文件的事件。

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

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

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

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

點這個按鈕：

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

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

“如何使用JavaScript將當前頁面保存成PDF”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關的知識可以關注創(chuàng)新互聯(lián)-成都網(wǎng)站建設公司網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！

本文名稱：如何使用JavaScript將當前頁面保存成PDF-創(chuàng)新互聯(lián)
文章URL：http://weahome.cn/article/giogd.html