html2canvas 用来下载图片的使用

html:

<div id="capture" style="padding: 10px;">

 <TableChart id="downloadImg11"></TableChart>

</div>

js:

import html2canvas from html2canvas

downloadImg() {
        const dom = document.getElementById("capture")
        const width = dom.offsetWidth 
        const height = dom.offsetHeight
        const scaleBy = 2
        const canvas = document.createElement('canvas')

        canvas.width = width * scaleBy // 防止模糊
        canvas.height = height * scaleBy
        canvas.style.width = width * scaleBy + 'px'
        canvas.style.height = height * scaleBy + 'px'
        const context = canvas.getContext('2d')

        context.scale(scaleBy, scaleBy)
        const filename = (new Date()).getTime() + '.' + "png"
        html2canvas(dom, {
            canvas: canvas,
            useCORS: true,
            scale: 2, 
            width: width, 
            height: height
        }).then(function(canvas){
            var type = 'png'
            var imgData = canvas.toDataURL(type)
            var _fixType = function(type) {
                type = type.toLowerCase().replace(/jpg/i, 'jpeg')
                var r = type.match(/png|jpeg|bmp|gif/)[0]
                return 'image/' + r
            }

   
            imgData = imgData.replace(_fixType(type),'image/octet-stream')

            const saveFile = function(data, filename){
                const save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a')

                save_link.href = data
                save_link.download = filename

                const event = document.createEvent('MouseEvents')

                event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)

                save_link.dispatchEvent(event)

            }

            saveFile(imgData,filename)

        })

    },