把一个页面的内容导出为canvas类型的一个图片

效果：

 点击即可 下载 打开 得到一个图片

代码：

 

import html2canvas from 'html2canvas';

弹窗的确认按钮 

const handleOk = (values) => {
    visible.value = false;
    printOut('导出告知卡')
};

const printOut = (name) => {
    document.body.scrollTop = 0; // IE的
    document.documentElement.scrollTop = 0; // 其他
    downloadResult(name)
}

下载

const downloadResult = (name) => {
    let canvasID = document.getElementById('modalRef')//需要导出的内容
    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 = dataURLToBlob(dom.toDataURL("image/png"));
        a.setAttribute("href", URL.createObjectURL(blob));
        a.setAttribute("download", name + ".png")
        document.body.appendChild(a);
        a.click();
        URL.revokeObjectURL(blob);
        document.body.removeChild(a);
    });
}

const dataURLToBlob = (dataurl) => {
    let arr = dataurl.split(',')
    let mime = arr[0].match(/:(.*?);/)[1]
    let bstr = atob(arr[1])
    let n = bstr.length, u8arr = new Uint8Array(n);
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], { type: mime })
}