前言

網(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)行在瀏覽器里的，本身沒有截圖的能力。所以要想實(shí)現(xiàn)截圖，必須通過其他迂回方案實(shí)現(xiàn)，廢話少說(shuō)，直接上結(jié)論。

前端方案1 canvas

實(shí)現(xiàn)原理：
html2canvas 是一個(gè) HTML 渲染器，屏幕截圖是基于 DOM，因此生成的圖片并不一定 100% 一致，因?yàn)樗鼪]有制作實(shí)際的屏幕截圖，而是根據(jù)頁(yè)面上可用的信息構(gòu)建屏幕截圖。
文檔介紹的比較清楚，canvas只是去還原dom的展示效果。

根據(jù)實(shí)現(xiàn)原理，可以想象，實(shí)現(xiàn)成本還是比較高的，需要解析dom和css樣式，而且css樣式不一定能完美映射到canvas，另外還會(huì)受限于canvas收到的一些限制，比如跨域資源問題。

前端方案2 svg

實(shí)現(xiàn)原理：

核心要素是SVG 的一個(gè)特性，允許在 <foreignObject> 標(biāo)簽中包含任意的 HTML 內(nèi)容。所以為了渲染該dom節(jié)點(diǎn)，需要如下步驟：

1. 遞歸克隆原始DOM節(jié)點(diǎn)
2. 計(jì)算節(jié)點(diǎn)和每個(gè)子節(jié)點(diǎn)的樣式并將其復(fù)制到相應(yīng)的克隆，并且要重新創(chuàng)建偽元素，因?yàn)樗鼈儺?dāng)然不會(huì)以任何方式克隆
3. 嵌入網(wǎng)頁(yè)字體，鏈接所有css樣式到style標(biāo)簽，應(yīng)用到clone節(jié)點(diǎn)
4. 嵌入圖像
   在 <img> 元素中嵌入圖像 URL
   背景 CSS 屬性中使用的內(nèi)嵌圖像，以類似于字體的方式
5. 將克隆的節(jié)點(diǎn)序列化為 XML
6. 將 XML 包裹到 <foreignObject> 標(biāo)簽中，然后包裹到 SVG 中，然后使其成為數(shù)據(jù) URL
7. 創(chuàng)建一個(gè)以 SVG 作為源的 Image 元素，并將其呈現(xiàn)在您也已創(chuàng)建的離屏畫布上，然后從畫布中讀取內(nèi)容

嗯，這就是svg方式實(shí)現(xiàn)了，和canvas方式一樣，需要我們處理dom，css和資源，但是后續(xù)的繪制渲染工作交給了瀏覽器，所以減輕了很多工作量和代碼量。

服務(wù)端方案

 

Puppeteer 是一個(gè) Node 庫(kù)，它提供了一個(gè)高級(jí) API 來(lái)通過 DevTools 協(xié)議控制 Chromium 或 Chrome。這里具體就不介紹了，我們只使用它的截圖功能。

這個(gè)就是真正的截圖能力了，官網(wǎng)有demo。

考慮到業(yè)務(wù)層的頁(yè)面都需要用戶訪問權(quán)限，所以正確的步驟應(yīng)該是：

1. 啟動(dòng)一個(gè)node服務(wù)，利用puppeter實(shí)現(xiàn)截圖能力
2. 客戶端發(fā)起一個(gè)請(qǐng)求，攜帶cookie
3. 第一步啟動(dòng)的服務(wù)處理此請(qǐng)求，生成圖片，地址返回給客戶端
4. 客戶端拿到圖片資源，進(jìn)行下載即可

對(duì)比

html2canvas

優(yōu)點(diǎn)

簡(jiǎn)單頁(yè)面截圖效果還可以，兼容性還好

缺點(diǎn)

• 部分樣式無(wú)法支持
• 復(fù)雜頁(yè)面，慘不忍睹。
• cors可以解決跨域，但是實(shí)際應(yīng)用還是問題百出
• 實(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支持不是很好，不過一些問題可以解決(canvas節(jié)點(diǎn)會(huì)導(dǎo)出空白，如果使用繪圖引擎的話，建議轉(zhuǎn)化成svg引擎繪圖)
• ie,edge 無(wú)法使用

基本能支持業(yè)務(wù)需求

后端截圖

優(yōu)點(diǎn)

• 真實(shí)截圖，終極方案，無(wú)兼容問題

缺點(diǎn)

• 實(shí)現(xiàn)流程稍微繁瑣
• 需要考慮 用戶權(quán)限認(rèn)證問題

導(dǎo)出實(shí)現(xiàn)

導(dǎo)出也就是下載文件到本地

a標(biāo)簽

原理是通過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

file-saver