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

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

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

方案

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

vue代碼片段

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

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%">`;
    });
}

2. 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');
    });
}