資訊專欄INFORMATION COLUMN
摘要：前端開(kāi)發(fā)的朋友們可能會(huì)遇到這個(gè)需求將您負(fù)責(zé)開(kāi)發(fā)的網(wǎng)頁(yè)的全部?jī)?nèi)容，包括文字和圖片，一起保存成一個(gè)文件。在您的前端頁(yè)面里畫(huà)一個(gè)按鈕，用于觸發(fā)將當(dāng)前網(wǎng)頁(yè)保存成文件的事件。
前端開(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è)面里畫(huà)一個(gè)按鈕，用于觸發(fā)將當(dāng)前網(wǎng)頁(yè)保存成PDF文件的事件。
HTML轉(zhuǎn)PDF的代碼如下：
如果想下載可以復(fù)制粘貼的代碼文本，可以到這個(gè)鏈接下載。https://github.com/linwalker/...
下面可以看看這個(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/Fior...
這個(gè)解決方案最初是一位叫l(wèi)inwalker的程序員設(shè)計(jì)的，下面是他的github鏈接：
https://github.com/linwalker/...
要獲取更多Jerry的原創(chuàng)技術(shù)文章，請(qǐng)關(guān)注公眾號(hào)"汪子熙"或者掃描下面二維碼:
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/98708.html
摘要：最近碰到個(gè)需求，需要把當(dāng)前頁(yè)面生成，并下載。但這并不是真的截圖，而是通過(guò)遍歷頁(yè)面結(jié)構(gòu)，收集所有元素信息及相應(yīng)樣式，渲染出。由于只能將它能處理的生成，因此渲染出來(lái)的結(jié)果并不是與原來(lái)一致。 最近碰到個(gè)需求，需要把當(dāng)前頁(yè)面生成pdf，并下載。弄了幾天，自己整理整理，記錄下來(lái)，我覺(jué)得應(yīng)該會(huì)有人需要 ：） 項(xiàng)目源碼地址：https://github.com/linwalker/... html2...
摘要：最近碰到個(gè)需求，需要把當(dāng)前頁(yè)面生成，并下載。但這并不是真的截圖，而是通過(guò)遍歷頁(yè)面結(jié)構(gòu)，收集所有元素信息及相應(yīng)樣式，渲染出。由于只能將它能處理的生成，因此渲染出來(lái)的結(jié)果并不是與原來(lái)一致。 最近碰到個(gè)需求，需要把當(dāng)前頁(yè)面生成pdf，并下載。弄了幾天，自己整理整理，記錄下來(lái)，我覺(jué)得應(yīng)該會(huì)有人需要 ：） 項(xiàng)目源碼地址：https://github.com/linwalker/... html2...
摘要：比上面的稍微好點(diǎn)，支持了一些方面的東西，具體看這個(gè)中文配置參數(shù)評(píng)價(jià)這種方法前端實(shí)現(xiàn)，靈活簡(jiǎn)單，而且在頁(yè)面還原上是很好的，生成的過(guò)程不需要自己操心，頁(yè)面樣式還可控，可以說(shuō)是非常不錯(cuò)的。 最近要搞前端html轉(zhuǎn)pdf的功能。折騰了兩天，略有所收，踩了一些坑，所以做些記錄，為后來(lái)的兄弟做些提示，也算是回饋社區(qū)。經(jīng)過(guò)一番調(diào)(sou)研(suo)發(fā)現(xiàn)html導(dǎo)出pdf一般有這幾種方式，各有各有優(yōu)...
摘要：比上面的稍微好點(diǎn)，支持了一些方面的東西，具體看這個(gè)中文配置參數(shù)評(píng)價(jià)這種方法前端實(shí)現(xiàn)，靈活簡(jiǎn)單，而且在頁(yè)面還原上是很好的，生成的過(guò)程不需要自己操心，頁(yè)面樣式還可控，可以說(shuō)是非常不錯(cuò)的。 最近要搞前端html轉(zhuǎn)pdf的功能。折騰了兩天，略有所收，踩了一些坑，所以做些記錄，為后來(lái)的兄弟做些提示，也算是回饋社區(qū)。經(jīng)過(guò)一番調(diào)(sou)研(suo)發(fā)現(xiàn)html導(dǎo)出pdf一般有這幾種方式，各有各有優(yōu)...
摘要：比上面的稍微好點(diǎn)，支持了一些方面的東西，具體看這個(gè)中文配置參數(shù)評(píng)價(jià)這種方法前端實(shí)現(xiàn)，靈活簡(jiǎn)單，而且在頁(yè)面還原上是很好的，生成的過(guò)程不需要自己操心，頁(yè)面樣式還可控，可以說(shuō)是非常不錯(cuò)的。 最近要搞前端html轉(zhuǎn)pdf的功能。折騰了兩天，略有所收，踩了一些坑，所以做些記錄，為后來(lái)的兄弟做些提示，也算是回饋社區(qū)。經(jīng)過(guò)一番調(diào)(sou)研(suo)發(fā)現(xiàn)html導(dǎo)出pdf一般有這幾種方式，各有各有優(yōu)...
閱讀 3006·2023-04-25 18:06
閱讀 2900·2021-11-22 09:34
閱讀 1801·2021-11-08 13:16
閱讀 1451·2021-09-24 09:47
閱讀 3135·2019-08-30 15:44
閱讀 2868·2019-08-29 17:24
閱讀 2694·2019-08-23 18:37
閱讀 2529·2019-08-23 16:55
