JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)截圖導(dǎo)出方案
前言
網(wǎng)頁(yè)截圖導(dǎo)出不是一個(gè)非常高頻的需求，但時(shí)不時(shí)的也會(huì)遇到。這里總結(jié)一下系統(tǒng)的解決方案，然后從中選擇合適自己的。
截圖導(dǎo)出可以看到是兩個(gè)功能，第一步實(shí)現(xiàn)截圖，第二步實(shí)現(xiàn)導(dǎo)出也就是下載能力。
截圖實(shí)現(xiàn)
首先，我們必須明白正常javascript是運(yùn)行在瀏覽器里的，本身沒(méi)有截圖的能力。所以要想實(shí)現(xiàn)截圖，必須通過(guò)其他迂回方案實(shí)現(xiàn)，廢話(huà)少說(shuō)，直接上結(jié)論。
前端方案1 canvas
實(shí)現(xiàn)原理：
html2canvas 是一個(gè) HTML 渲染器，屏幕截圖是基于 DOM，因此生成的圖片并不一定 100% 一致，因?yàn)樗鼪](méi)有制作實(shí)際的屏幕截圖，而是根據(jù)頁(yè)面上可用的信息構(gòu)建屏幕截圖。
文檔介紹的比較清楚，canvas只是去還原dom的展示效果。
根據(jù)實(shí)現(xiàn)原理，可以想象，實(shí)現(xiàn)成本還是比較高的，需要解析dom和css樣式，而且css樣式不一定能完美映射到canvas，另外還會(huì)受限于canvas收到的一些限制，比如跨域資源問(wèn)題。
前端方案2 svg
實(shí)現(xiàn)原理：
核心要素是SVG 的一個(gè)特性，允許在 <foreignObject> 標(biāo)簽中包含任意的 HTML 內(nèi)容。所以為了渲染該dom節(jié)點(diǎn)，需要如下步驟：
- 遞歸克隆原始DOM節(jié)點(diǎn)
- 計(jì)算節(jié)點(diǎn)和每個(gè)子節(jié)點(diǎn)的樣式并將其復(fù)制到相應(yīng)的克隆，并且要重新創(chuàng)建偽元素，因?yàn)樗鼈儺?dāng)然不會(huì)以任何方式克隆
- 嵌入網(wǎng)頁(yè)字體，鏈接所有css樣式到style標(biāo)簽，應(yīng)用到clone節(jié)點(diǎn)
- 嵌入圖像
在 <img> 元素中嵌入圖像 URL
背景 CSS 屬性中使用的內(nèi)嵌圖像，以類(lèi)似于字體的方式 - 將克隆的節(jié)點(diǎn)序列化為 XML
- 將 XML 包裹到 <foreignObject> 標(biāo)簽中，然后包裹到 SVG 中，然后使其成為數(shù)據(jù) URL
- 創(chuàng)建一個(gè)以 SVG 作為源的 Image 元素，并將其呈現(xiàn)在您也已創(chuàng)建的離屏畫(huà)布上，然后從畫(huà)布中讀取內(nèi)容
嗯，這就是svg方式實(shí)現(xiàn)了，和canvas方式一樣，需要我們處理dom，css和資源，但是后續(xù)的繪制渲染工作交給了瀏覽器，所以減輕了很多工作量和代碼量。
服務(wù)端方案
Puppeteer 是一個(gè) Node 庫(kù)，它提供了一個(gè)高級(jí) API 來(lái)通過(guò) DevTools 協(xié)議控制 Chromium 或 Chrome。這里具體就不介紹了，我們只使用它的截圖功能。
這個(gè)就是真正的截圖能力了，官網(wǎng)有demo。
考慮到業(yè)務(wù)層的頁(yè)面都需要用戶(hù)訪問(wèn)權(quán)限，所以正確的步驟應(yīng)該是：
- 啟動(dòng)一個(gè)node服務(wù)，利用puppeter實(shí)現(xiàn)截圖能力
- 客戶(hù)端發(fā)起一個(gè)請(qǐng)求，攜帶cookie
- 第一步啟動(dòng)的服務(wù)處理此請(qǐng)求，生成圖片，地址返回給客戶(hù)端
- 客戶(hù)端拿到圖片資源，進(jìn)行下載即可
對(duì)比
html2canvas
優(yōu)點(diǎn)
簡(jiǎn)單頁(yè)面截圖效果還可以，兼容性還好
缺點(diǎn)
- 部分樣式無(wú)法支持
- 復(fù)雜頁(yè)面，慘不忍睹。
- cors可以解決跨域，但是實(shí)際應(yīng)用還是問(wèn)題百出
- 實(shí)現(xiàn)非常復(fù)雜，難以改動(dòng)
在我們項(xiàng)目幾乎無(wú)法使用
dom-to-image
優(yōu)點(diǎn)
- 實(shí)現(xiàn)簡(jiǎn)單，可下載后自行改動(dòng)源碼
- 還原度良好，尤其chrome支持非常好
缺點(diǎn)
- safari支持不是很好，不過(guò)一些問(wèn)題可以解決(canvas節(jié)點(diǎn)會(huì)導(dǎo)出空白，如果使用繪圖引擎的話(huà)，建議轉(zhuǎn)化成svg引擎繪圖)
- ie,edge 無(wú)法使用
基本能支持業(yè)務(wù)需求
后端截圖
優(yōu)點(diǎn)
- 真實(shí)截圖，終極方案，無(wú)兼容問(wèn)題
缺點(diǎn)
- 實(shí)現(xiàn)流程稍微繁瑣
- 需要考慮 用戶(hù)權(quán)限認(rèn)證問(wèn)題
導(dǎo)出實(shí)現(xiàn)
導(dǎo)出也就是下載文件到本地
a標(biāo)簽
原理是通過(guò)a標(biāo)簽的download屬性實(shí)現(xiàn)下載。
// 基本使用
<a href="/images/xxxxx.jpg" download="filename">
// 腳本觸發(fā)
const download = (filename, url) => {
let a = document.createElement('a');
a.style = 'display: none'; // 創(chuàng)建一個(gè)隱藏的a標(biāo)簽
a.download = filename;
a.href = url;
document.body.appendChild(a);
a.click(); // 觸發(fā)a標(biāo)簽的click事件
document.body.removeChild(a);
}blob文件流對(duì)象
這個(gè)需要服務(wù)端支持，發(fā)起請(qǐng)求，服務(wù)端返回?cái)?shù)據(jù)流，然后前端觸發(fā)下載。
具體就不多說(shuō)了，網(wǎng)上有很多文章。
這里推薦幾個(gè)封裝好的下載文件庫(kù)
downloadjs
