html生成图片下载

import html2canvas from "html2canvas";

export default {
    methods: {
        takeScreenshot(name) {
            html2canvas(document.getElementById('view')).then(canvas => {
                this.convertCanvasToImg(canvas,name)
            });
        },
        convertCanvasToImg(canvas,name) {
            // canvas base64 转 blob
            const myBlob = this.dataURLtoBlob(canvas.toDataURL('img/png', 0.92))
            // blob转URL对象
            const myUrl = URL.createObjectURL(myBlob)
            // 创建a标签，下载图片
            this.downImg(myUrl,name)
        },
        dataURLtoBlob(dataurl) {
            var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
                bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n);
            }
            return new Blob([u8arr], { type: mime });
        },
        downImg(url,name) {
            // 创建a标签 并设置其相关属性，最后触发其点击事件
            let a = document.createElement("a")
            let clickEvent = document.createEvent("MouseEvents");
            a.setAttribute("href", url)
            a.setAttribute("download", name)
            a.setAttribute("target", '_blank')
            clickEvent.initEvent('click', true, true)
            a.dispatchEvent(clickEvent);
        },
    }
}

调用：takeScreenshot('文件名')