前端操作剪切板不完全指北
由于瀏覽器隱私協(xié)議限制，以前瀏覽器是不允許直接訪問(wèn)剪切板的针肥，最近幾年书幕，隨著web應(yīng)用興起，W3C也在逐漸拓寬JavaScript應(yīng)用范圍凡橱，現(xiàn)在前端也能直接操作剪切板小作。文中按照訪問(wèn)方式，分為間接訪問(wèn)和直接訪問(wèn)稼钩。
間接訪問(wèn)
交互事件
用戶交互事件顾稀，如paste（復(fù)制）、cut（剪切）坝撑、dragstart（拖拽）等静秆，能夠通過(guò)事件對(duì)象Event粮揉，訪問(wèn)到剪切板「П剩可以通過(guò)這部分操作扶认，我們可以格式化、自定義剪切板中內(nèi)容塔沃。在contenteditable（可編輯）元素中蝠引，為了統(tǒng)一粘貼文本樣式，我們可以在元素的復(fù)制事件中蛀柴，對(duì)文本格式進(jìn)行過(guò)濾螃概。
let editor = document.getElementById('editor)
editor.addEventListener('paste', e => {
e.preventDefault()
let data = e.clipboardData.getData('text/plain')
// 格式化粘貼xml標(biāo)簽
data = data.replace(/>/g, '>')
.replace(/</g, '<')
let result = data.split('/n').join('<br />')
document.execCommand('insertHTML', null, result)
})
除了文本，我們還能獲取其他內(nèi)容嗎鸽疾？比如圖像吊洼？答案是一半一半。為什么說(shuō)一半一半制肮？
正常情況下冒窍，我們用截圖軟件截圖，這部分是能在e.dataTransfer.files中獲取到的豺鼻，截圖軟件實(shí)際上是將base64文件放到了剪切板中综液。但是，假如我們?cè)诓僮飨到y(tǒng)中復(fù)制一張圖片儒飒，在dataTransfer對(duì)象中谬莹，是獲取不到的，這是瀏覽器隱私協(xié)議限制桩了，正如web頁(yè)面不能直接操作系統(tǒng)文件（雖然部分瀏覽器已經(jīng)支持File API）一樣附帽，遇到這種需求，需要先放一放井誉。
在業(yè)務(wù)開(kāi)發(fā)中蕉扮，測(cè)試童鞋們，總是能給人一些驚喜颗圣，誰(shuí)說(shuō)只能粘貼喳钟，我還可以拖拽，拖拽一些奇奇怪怪的內(nèi)容進(jìn)去在岂，看荚藻，又發(fā)現(xiàn)一個(gè)Bug〗喽危可編輯元素默認(rèn)是允許拖拽的，為避免這種方式共郭，給我們的選擇只有兩個(gè)祠丝，第一疾呻，禁止拖拽，可以写半，但是比較暴力岸蜗，第二就是改寫(xiě)拖拽內(nèi)容，監(jiān)聽(tīng)dragstart事件叠蝇。
let editor = document.getElementById('editor)
editor.addEventListener('dragstart', e => {
e.preventDefault()
// 獲取頁(yè)面選中文本
let selection = window.getSelection()
let data = selection.toString()
e.dataTransfer.setData('text/plain', data)
})
直接訪問(wèn)
clipboard API
最近navigator新增了Clipboard API璃岳，不僅能夠?qū)羟邪逦谋尽⑽募x取悔捶，還提供了寫(xiě)的操作铃慷，但是兼容性較差。文本讀寫(xiě)Chrome 66版本即支持蜕该，但是image/png得76+才行犁柜。返回值是Promise，用起來(lái)比較方便堂淡，但是對(duì)于剪切板的訪問(wèn)馋缅，首先需要運(yùn)行在https服務(wù)頁(yè)面中，其次需要請(qǐng)求用戶授權(quán)绢淀，授權(quán)通過(guò)后萤悴，才能訪問(wèn)。基本使用示例如下：
// 讀取文本
navigator.clipboard.readText().then(
clipText => document.getElementById("editor").innerText = clipText
);
// 讀取剪切板中圖片
navigator.permissions.query({name: "clipboard-read"}).then(result => {
if (result.state == "granted" || result.state == "prompt") {
navigator.clipboard.read().then(data => {
for (let i=0; i<data.items.length; i++) {
if (data.items[i].type != "image/png") {
alert("Clipboard contains non-image data. Unable to access it.");
} else {
const blob = data.items[i].getType("image/png");
imgElem.src = URL.createObjectURL(blob);
}
}
});
}
});
electron clipboard
electron現(xiàn)在被越來(lái)越多的公司納入到桌面應(yīng)用開(kāi)發(fā)中皆的。由于剪切板操作一直是web應(yīng)用開(kāi)發(fā)的一個(gè)痛點(diǎn)覆履，在electron中，不管主進(jìn)程還是渲染進(jìn)程祭务，都能使用剪切板API内狗，操作也豐富許多，不僅能夠操作文本义锥、文件柳沙，還能操作Buffer,使得很多操作都成為可能。
const { clipboard } = require('electron')
clipboard.writeText('hello i am a bit of text!')
const text = clipboard.readText()
console.log(text)
