1.template中的代碼

按鈕觸發(fā)保存圖片（這里使用的是element ui）
<el-button icon="el-icon-download" circle type="mini" @click="saveImage('Top3Img', '工時最多前三原因')"></el-button>
<div id="Top3Img" ref="Top3Img">
    你需要截取的內(nèi)容（要保證這個內(nèi)容是在頁面上可見  否則截取會是空白）
</div>

2.methods中的方法

//注意要在script標(biāo)簽前面引入html2canvas  
import html2canvas from 'html2canvas';

      //下面是methods中的內(nèi)容
      //圖片轉(zhuǎn)換格式的方法 直接使用就好  不需要知道為什么
       dataURLToBlob(dataurl) {
            let arr = dataurl.split(',');
            let mime = arr[0].match(/:(.*?);/)[1];
            let bstr = atob(arr[1]);
            let n = bstr.length;
            let u8arr = new Uint8Array(n);
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n);
            }
            return new Blob([u8arr], { type: mime });
        },
        /*保存圖片的方法（即按鈕點(diǎn)擊觸發(fā)的方法）   
          第一個參數(shù)為需要保存的div的id名  
          第二個參數(shù)為保存圖片的名稱 */
        saveImage(divText, imgText) {
            let canvasID = this.$refs[divText];
            let that = this;
            let a = document.createElement('a');
            html2canvas(canvasID).then(canvas => {
                let dom = document.body.appendChild(canvas);
                dom.style.display = 'none';
                a.style.display = 'none';
                document.body.removeChild(dom);
                let blob = that.dataURLToBlob(dom.toDataURL('image/png'));
                a.setAttribute('href', URL.createObjectURL(blob));
                //這塊是保存圖片操作  可以設(shè)置保存的圖片的信息
                a.setAttribute('download', imgText + '.png');
                document.body.appendChild(a);
                a.click();
                URL.revokeObjectURL(blob);
                document.body.removeChild(a);
            });
        },

3.問題：

有網(wǎng)友反饋了截圖的內(nèi)容是空的，這邊解釋一下，html2canvas截圖會把所截圖的圖片內(nèi)容base64化，如果這個圖片不是本地圖片會導(dǎo)致跨域報錯，最終導(dǎo)致截圖出來的圖片是空的，這里我們只需要給圖片上增加一個屬性crossOrigin="Anonymous"，以及對應(yīng)后臺做跨域處理就行了。