vue2把页面导出img、html、Excel方法

下载canvas方法截图方法
https://gitee.com/qiweiii/abcd/blob/master/html2canvas.js

通过canvas封装的方法，封装部分方法

import  "../assets/js/html2canvas";

// 获取截图的base码
export function GetJpeg( dom) {
    return new Promise(resolve => {
        html2canvas(dom).then(canvas => {
            const jpeg = canvas.toDataURL('image/png');
            resolve(jpeg);
        });
    });
};
// base64转化为file文件
const base64ToFile = urlData => {
    const arr = urlData.split(',');
    const mime = arr[0].match(/:(.*?);/)[1];
    const bytes = atob(arr[1]);
    let n = bytes.length;
    const ia = new Uint8Array(n);
    while (n--) {
        ia[n] = bytes.charCodeAt(n);
    }
    return new File([ia], 'jpeg', { type: mime });
};


// 下载图片
export function DownloadImg(ref) {
    return new Promise(resolve => {
        html2canvas(ref, {
            backgroundColor: '#e8f4ff',
            useCORS: true // 如果截图的内容里有图片,可能会有跨域的情况,加上这个参数,解决文件跨域问题
        }).then((canvas) => {
            const dataURL = canvas.toDataURL('image/png')
            const creatDom = document.createElement('a')
            document.body.appendChild(creatDom)
            creatDom.href = dataURL
            creatDom.download = 'map'
            creatDom.click();
            resolve(dataURL);
        })
    })
}

导出html、Excel

//type：html、Excel类型
 async uploadExFun(type) {
            const ref = this.$refs.chart // 截图区域
            const loading = this.$loading({
                lock: true,
                text: '加载中...',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            try {
                let res = await GetJpeg(ref);
                if (res) {
                    let data = {
                        type,
                        url: res,
                    }
/*
这里的接口类型需要用 FormData，把截图的base文件传入，后面就是服务端来做了
   let forms = new FormData();
    forms.append('imageData', params.url);
{ 
   url: xxx,
  method: "post",
  responseType: "blob",
  data: forms
}
*/
                    let exlUrl = await UploadExcel(data);
                    loading.close();

                    if (exlUrl.data && exlUrl.data.exception) {
                        return this.$message.error(exlUrl.data.exception);
                    }
                    if (exlUrl.data) {
                        let streamData;
                        var element = document.createElement('a');

                        if (type == 'html') {
                            streamData = new Blob([exlUrl.data], { type: 'text/html;charset=utf-8' });
                        } else {
                            streamData = new Blob([exlUrl.data]);
                        }
                        element.download = '名称.' + type;
                        element.style.display = 'none';
                        let url = window.URL.createObjectURL(streamData);
                        element.href = url;
                        document.body.appendChild(element);
                        element.click();
                        document.body.removeChild(element);
                        this.$message.success('导出成功');
                    }
                }
            } catch (error) {
                console.log(error)
                loading.close();
            }
        }