故事背景俯邓，需要直接在頁(yè)面上點(diǎn)擊一鍵粘貼按鈕讲弄，自動(dòng)復(fù)制服務(wù)生成的圖片到剪貼板方便業(yè)務(wù)一些粘貼發(fā)送給客戶。
1腌歉、開(kāi)始做法蛙酪，使用原生的document.execCommand('copy')進(jìn)行復(fù)制，代碼如下翘盖。雖然也能實(shí)現(xiàn)了圖片的復(fù)制桂塞，但粘貼的結(jié)果不是很理想，有些只能在微信上粘貼馍驯，釘釘阁危、瀏覽器富文本上不能；有些是微信可以釘釘汰瘫、富文本不行狂打。總之就會(huì)出現(xiàn)有些黏貼不到的情況吟吝。
#原生js寫(xiě)法
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('復(fù)制成功')
this._recordUserBehavior(32)
this.dispatchEvent(new CustomEvent('has-send-quote', {bubbles: true, composed: true}))
this.cancel()
}
targetPic.src = targetUrl
2菱父、然而需求就是要實(shí)現(xiàn)這樣一個(gè)功能，無(wú)奈只能另外尋找法子。
回過(guò)頭看看浙宜，瀏覽器是如何獲取剪切板中的圖片官辽？
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;
}
}
}
// 此時(shí)file就是剪切板中的圖片文件
});
直接上代碼如上所示，就是直接從clipboardData.items 中獲取圖片文件進(jìn)行處理的(經(jīng)過(guò)調(diào)試發(fā)現(xiàn)粟瞬，原先的方法復(fù)制出來(lái)的圖片同仆，瀏覽器識(shí)別為html格式不是文件格式)。那么直接往clipboardData.items寫(xiě)入圖片文件不就可以了裙品？查詢了一下俗批，果然有對(duì)應(yīng)的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下才能使用
