JavaScript實現(xiàn)網(wǎng)頁截圖導出方案
前言
網(wǎng)頁截圖導出不是一個非常高頻的需求，但時不時的也會遇到。這里總結(jié)一下系統(tǒng)的解決方案，然后從中選擇合適自己的。
截圖導出可以看到是兩個功能，第一步實現(xiàn)截圖，第二步實現(xiàn)導出也就是下載能力。
截圖實現(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é)點，需要如下步驟：
- 遞歸克隆原始DOM節(jié)點
- 計算節(jié)點和每個子節(jié)點的樣式并將其復制到相應(yīng)的克隆，并且要重新創(chuàng)建偽元素，因為它們當然不會以任何方式克隆
- 嵌入網(wǎng)頁字體，鏈接所有css樣式到style標簽，應(yīng)用到clone節(jié)點
- 嵌入圖像
在 <img> 元素中嵌入圖像 URL
背景 CSS 屬性中使用的內(nèi)嵌圖像，以類似于字體的方式 - 將克隆的節(jié)點序列化為 XML
- 將 XML 包裹到 <foreignObject> 標簽中，然后包裹到 SVG 中，然后使其成為數(shù)據(jù) URL
- 創(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)該是：
- 啟動一個node服務(wù)，利用puppeter實現(xiàn)截圖能力
- 客戶端發(fā)起一個請求，攜帶cookie
- 第一步啟動的服務(wù)處理此請求，生成圖片，地址返回給客戶端
- 客戶端拿到圖片資源，進行下載即可
對比
html2canvas
優(yōu)點
簡單頁面截圖效果還可以，兼容性還好
缺點
- 部分樣式無法支持
- 復雜頁面，慘不忍睹。
- cors可以解決跨域，但是實際應(yīng)用還是問題百出
- 實現(xiàn)非常復雜，難以改動
在我們項目幾乎無法使用
dom-to-image
優(yōu)點
- 實現(xiàn)簡單，可下載后自行改動源碼
- 還原度良好，尤其chrome支持非常好
缺點
- safari支持不是很好，不過一些問題可以解決(canvas節(jié)點會導出空白，如果使用繪圖引擎的話，建議轉(zhuǎn)化成svg引擎繪圖)
- ie,edge 無法使用
基本能支持業(yè)務(wù)需求
后端截圖
優(yōu)點
- 真實截圖，終極方案，無兼容問題
缺點
- 實現(xiàn)流程稍微繁瑣
- 需要考慮 用戶權(quán)限認證問題
導出實現(xiàn)
導出也就是下載文件到本地
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
