故事背景，需要直接在頁面上點擊一鍵粘貼按鈕，自動復制服務生成的圖片到剪貼板方便業務一些粘貼發送給客戶。

1、開始做法，使用原生的document.execCommand('copy')進行復制，代碼如下。雖然也能實現了圖片的復制，但粘貼的結果不是很理想，有些只能在微信上粘貼，釘釘、瀏覽器富文本上不能；有些是微信可以釘釘、富文本不行?？傊蜁霈F有些黏貼不到的情況。

#原生js寫法
const targetPic = new Image()
    targetPic.onload = e => {
      targetPic.setAttribute('contenteditable', true)
      document.body.appendChild(targetPic)
      const selection = window.getSelection()
      const range = document.createRange()
      range.selectNode(targetPic)
      selection.removeAllRanges()
      selection.addRange(range)
      document.execCommand('copy')
      targetPic.setAttribute('contenteditable', false)
      document.body.removeChild(targetPic)
      this.isuTip.success('復制成功')
      this._recordUserBehavior(32)
      this.dispatchEvent(new CustomEvent('has-send-quote', {bubbles: true, composed: true}))
      this.cancel()
    }
    targetPic.src = targetUrl

2、然而需求就是要實現這樣一個功能，無奈只能另外尋找法子。
回過頭看看，瀏覽器是如何獲取剪切板中的圖片？

ocument.addEventListener('paste', function (event) {
    var items = event.clipboardData && event.clipboardData.items;
    var file = null;
    if (items && items.length) {
        // 檢索剪切板items
        for (var i = 0; i < items.length; i++) {
            if (items[i].type.indexOf('image') !== -1) {
                file = items[i].getAsFile();
                break;
            }
        }
    }
    // 此時file就是剪切板中的圖片文件
});

直接上代碼如上所示，就是直接從clipboardData.items 中獲取圖片文件進行處理的(經過調試發現，原先的方法復制出來的圖片，瀏覽器識別為html格式不是文件格式)。那么直接往clipboardData.items寫入圖片文件不就可以了？查詢了一下，果然有對應的api。使用如下，果然行的通。

const data = await fetch(`/img.img1.png`)
      // const data = await fetch('/management/attachments/63848472471ea1095093874a498d25dba07d478a.do')
      const blob = await data.blob()

      await navigator.clipboard.write([
        // eslint-disable-next-line no-undef
        new ClipboardItem({
          [blob.type]: blob
        })
      ])
      console.log('Fetched image copied.')
    } catch (err) {
      console.error(err.name, err.message)

注： 瀏覽器為了安全，navigator.clipboard必須在https下才能使用