資訊專欄INFORMATION COLUMN
摘要：前言之前上一篇隨筆說了截圖網(wǎng)頁(yè)為圖片，下來個(gè)新需求，把網(wǎng)頁(yè)截圖后保存為文件供用戶下載。使用保存網(wǎng)頁(yè)為文件支持跨域正文需求用戶點(diǎn)擊下載，將頁(yè)面保存為文件并下載。思路繼續(xù)使用截圖后將畫布內(nèi)容轉(zhuǎn)換為文件。
前言
之前上一篇隨筆說了Canvas截圖網(wǎng)頁(yè)為圖片，下來個(gè)新需求，把網(wǎng)頁(yè)截圖后保存為PDF文件供用戶下載。
使用canvas保存網(wǎng)頁(yè)為pdf文件支持跨域
正文
需求：用戶點(diǎn)擊下載，將頁(yè)面保存為PDF文件并下載。
思路：繼續(xù)使用Canvas截圖后將畫布內(nèi)容轉(zhuǎn)換為pdf文件。
首先我們需要引入js文件jspdf.debug.js 下載路徑 https://github.com/MrRio/jsPDF
引入canvas的js文件，js文件獲取地址官網(wǎng)主頁(yè)：http://html2canvas.hertzen.com/
div按鈕代碼導(dǎo)出為PDF按鈕需要獲取為PDF的div
jsp代碼
此次網(wǎng)頁(yè)改為PDF，與上次截圖網(wǎng)頁(yè)為PNG，使用同一種技術(shù)，都是先使用Canvas截圖畫布后轉(zhuǎn)格式。
同樣也有偏移、模糊、跨域等問題，使用之前的代碼來處理。
轉(zhuǎn)換pdf會(huì)讓背景色變?yōu)楹谏褂胏ss樣式改一下背景色就可以了。
完美轉(zhuǎn)換為pdf。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/108817.html
摘要：最近做了個(gè)實(shí)現(xiàn)網(wǎng)頁(yè)縮略圖的項(xiàng)目，其中不免需要用到網(wǎng)頁(yè)截屏。選擇好方案后還是踩了不少坑，第一個(gè)就是我得想辦法讓它和通信，不然我沒法通過前端只傳一個(gè)需要被截圖的鏈接給就能實(shí)現(xiàn)截圖。 最近做了個(gè)實(shí)現(xiàn)網(wǎng)頁(yè)縮略圖的項(xiàng)目，其中不免需要用到網(wǎng)頁(yè)截屏。 一開始想的是看看能不能在前端直接實(shí)現(xiàn)截圖，因?yàn)閃eb端的截圖并生成圖片并不算是一個(gè)高頻的需求，網(wǎng)上資料自然也不算多，查來查去，發(fā)現(xiàn)JavaScript...
摘要：前端開發(fā)的朋友們可能會(huì)遇到這個(gè)需求將您負(fù)責(zé)開發(fā)的網(wǎng)頁(yè)的全部?jī)?nèi)容，包括文字和圖片，一起保存成一個(gè)文件。在您的前端頁(yè)面里畫一個(gè)按鈕，用于觸發(fā)將當(dāng)前網(wǎng)頁(yè)保存成文件的事件。 前端開發(fā)的朋友們可能會(huì)遇到這個(gè)需求：將您負(fù)責(zé)開發(fā)的網(wǎng)頁(yè)的全部?jī)?nèi)容，包括文字和圖片，一起保存成一個(gè)PDF文件。如果采用屏幕截圖的話，默認(rèn)Windows操作系統(tǒng)的截圖按鈕無法完整截取超過一屏幕的屏幕內(nèi)容。 我在網(wǎng)上找了一段時(shí)間...
摘要：本次技術(shù)調(diào)研來源于項(xiàng)目中的一個(gè)重要功能需求實(shí)現(xiàn)微信長(zhǎng)按網(wǎng)頁(yè)保存為截圖。以下主要解決兩類跨域的圖片資源包括已配置過的中的圖片資源和微信用戶頭像圖片資源。 本次技術(shù)調(diào)研來源于H5項(xiàng)目中的一個(gè)重要功能需求：實(shí)現(xiàn)微信長(zhǎng)按網(wǎng)頁(yè)保存為截圖。 這里有個(gè)栗子（請(qǐng)用微信打開，長(zhǎng)按圖片即可保存）：3分鐘探索你的知識(shí)邊界 將整個(gè)網(wǎng)頁(yè)保存為圖片是一個(gè)十分有趣的功能，常見于H5活動(dòng)頁(yè)的結(jié)尾頁(yè)分享。以下則是項(xiàng)目中...
閱讀 3408·2023-04-26 02:40
閱讀 4732·2021-09-22 15:22
閱讀 1762·2021-09-22 10:02
閱讀 3605·2021-08-11 10:23
閱讀 1449·2019-08-30 15:55
閱讀 2550·2019-08-30 12:48
閱讀 677·2019-08-30 11:04
閱讀 768·2019-08-29 16:29
