截图并复制到粘贴板

安装下载
npm i html2canvas -S

import html2Canvas from ‘html2canvas’

//使用querySelector选择需要截图的块使用id定位
      html2canvas(document.querySelector('#printTable')).then((canvas) => {
        let base64Data = canvas.toDataURL('image/png', 1)
        let blob = null
        base64Data = canvas.toDataURL('image/png', 1) // 此方法可以设置截图质量0-1
        var format = 'image/png'
        //将Base64图片编码转换成blob
        var base64 = base64Data
        var code = window.atob(base64.split(',')[1])
        var aBuffer = new window.ArrayBuffer(code.length)
        var uBuffer = new window.Uint8Array(aBuffer)
        for (var i = 0; i < code.length; i++) {
          uBuffer[i] = code.charCodeAt(i) & 0xff
        }
        try {
          blob = new Blob([uBuffer], { type: format })
        } catch (e) {
          window.BlobBuilder =
            window.BlobBuilder ||
            window.WebKitBlobBuilder ||
            window.MozBlobBuilder ||
            window.MSBlobBuilder
          if (e.name == 'TypeError' && window.BlobBuilder) {
            var bb = new window.BlobBuilder()
            bb.append(uBuffer.buffer)
            blob = bb.getBlob('image/png')
          } else if (e.name == 'InvalidStateError') {
            blob = new Blob([aBuffer], { type: format })
          }
        }
        // eslint-disable-next-line no-undef
        const clipboardItemInput = new ClipboardItem({
          'image/png': blob,
        })
        navigator.clipboard.write([clipboardItemInput])
        console.log('success')
        // 谷歌浏览器截图没有权限的问题解决方案
        // Chrome地址栏输入：chrome://flags/#unsafely-treat-insecure-origin-as-secure　　　　　//添加没有权限的网址 http://0.0.0.0:端口号 多个地址用,后分隔并开启为enabled 重启浏览器　　　　

 
 
      })