前端js儲存頁面為圖片下載到本地

手機端點選下載按鈕將頁面儲存成圖片到本地
前端js儲存頁面為圖片下載到本地的坑
html2canvas 識別 svg 解決方案

方案

html2canvas.js：可將 htmldom 轉為 canvas 元素。
canvasAPI：toDataUrl() 可將 canvas 轉為 base64 格式
替換 html 為 img，src為 base64

vue程式碼片段

手機端將頁面儲存為圖片（即頁面展現的內容實際是圖片），長按後可儲存到本地

import html2canvas from 'html2canvas';

replaceHtml2Img () {
    // 獲取想要轉換的 DOM 節點
    const dom = this.$refs['container'];
    // DOM 節點計算後寬高
    let {width, height} = dom.getBoundingClientRect();
    // 獲取畫素比
    const dpr = window.devicePixelRatio || 1;
    // 建立自定義 canvas 元素
    const canvas = document.createElement('canvas');
    // 設定 canvas 元素屬性寬高為 DOM 節點寬高 * 畫素比
    canvas.width = width * dpr;
    canvas.height = height * dpr;
    // 設定 canvas css寬高為 DOM 節點寬高
    canvas.style.width = `${width}px`;
    canvas.style.height = `${height}px`;
    // 獲取畫筆
    const context = canvas.getContext('2d');
    // 將所有繪製內容放大畫素比倍,解決dpr不同圖片模糊問題
    context.scale(dpr, dpr);
    // 將自定義 canvas 作為配置項傳入，開始繪製
    html2canvas(dom, {canvas}).then((canvas) => {
        let dataUrl = canvas.toDataURL("image/png", 1.0);
        let parent = dom.parentNode;
        parent.innerHTML = `<img src="${dataUrl}" style="width: 100%">`;
    });
}

pc端點選按鈕下載頁面dom為圖片到本地

handleDownload (id) {
    let ele = document.getElementById(id);
    let ignoreElements = ele.querySelector('.chart-download');
    html2canvas(ele, {
        logging: false,
        ignoreElements: (elements) => { //  忽略的ele
            return elements === ignoreElements;
        }
    }).then(function (canvas) {
        // canvas轉為圖片流
        let dataurl = canvas.toDataURL('image/png');
        /*
            // 非ie下正常，主要原因是ie下a標籤不支援download屬性
            let donwLink = document.createElement('a');
            donwLink.href = dataurl;
            donwLink.download = "統計分析" + new Date().getTime(); // 圖片名字
            donwLink.click();
            let event = new MouseEvent('click');
            donwLink.dispatchEvent(event);
        */
        
        // 使用downloadjs相容ie下下載，https://github.com/rndme/download
        // download(data, strFileName, strMimeType);
        downloadjs(dataurl, `統計分析${new Date().getTime()}`, 'image/png');
    });
}