前言

網(wǎng)頁截圖導(dǎo)出不是一個非常高頻的需求，但時不時的也會遇到。這里總結(jié)一下系統(tǒng)的解決方案，然后從中選擇合適自己的。

截圖導(dǎo)出可以看到是兩個功能，第一步實現(xiàn)截圖，第二步實現(xiàn)導(dǎo)出也就是下載能力。

截圖實現(xiàn)

首先，我們必須明白正常javascript是運行在瀏覽器里的，本身沒有截圖的能力。所以要想實現(xiàn)截圖，必須通過其他迂回方案實現(xiàn)，廢話少說，直接上結(jié)論。

前端方案1 canvas

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

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

前端方案2 svg

實現(xiàn)原理：

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

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

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

服務(wù)端方案

 

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

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

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

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

對比

html2canvas

優(yōu)點

簡單頁面截圖效果還可以，兼容性還好

缺點

• 部分樣式無法支持
• 復(fù)雜頁面，慘不忍睹。
• cors可以解決跨域，但是實際應(yīng)用還是問題百出
• 實現(xiàn)非常復(fù)雜，難以改動

在我們項目幾乎無法使用

dom-to-image

優(yōu)點

• 實現(xiàn)簡單，可下載后自行改動源碼
• 還原度良好，尤其chrome支持非常好

缺點

• safari支持不是很好，不過一些問題可以解決(canvas節(jié)點會導(dǎo)出空白，如果使用繪圖引擎的話，建議轉(zhuǎn)化成svg引擎繪圖)
• ie,edge 無法使用

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

后端截圖

優(yōu)點

• 真實截圖，終極方案，無兼容問題

缺點

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

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

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

a標簽

原理是通過a標簽的download屬性實現(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)建一個隱藏的a標簽
    a.download = filename;
    a.href = url;
    document.body.appendChild(a);
    a.click(); // 觸發(fā)a標簽的click事件
    document.body.removeChild(a);
}

blob文件流對象

這個需要服務(wù)端支持，發(fā)起請求，服務(wù)端返回數(shù)據(jù)流，然后前端觸發(fā)下載。
具體就不多說了，網(wǎng)上有很多文章。

這里推薦幾個封裝好的下載文件庫
downloadjs

file-saver