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 重啟瀏覽器
　　　　

 

 

      })