Vue实现点击按钮自动截图到剪切板

安装 clipboard-polyfill html2canvas

npm install clipboard-polyfill

npm install --save html2canvas

 安装完成后导入对应的包

import * as clipboard from 'clipboard-polyfill'

import html2canvas from 'html2canvas'

 

//使用querySelector选择需要截图的块使用id定位
      html2canvas(document.querySelector('#printTable')).then((canvas) => {
        let base64Data = ''
        let blob = null
        document.body.appendChild(canvas) // 直接使用canvas
        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 })
          }
        }
        //将创建ClipboardItem并放入blob
        const item = new clipboard.ClipboardItem({
          'image/png': blob,
        })
        //设置对象到粘贴板
        clipboard.write([item])
      })

　　

第二种截图到粘贴板的方法不依赖clipboard粘贴

//使用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 重启浏览器
　　　　

 

 

      })