前端操作剪切板不完全指北
由于浏览器隐私协议限制，以前浏览器是不允许直接访问剪切板的，最近几年，随着web应用兴起，W3C也在逐渐拓宽JavaScript应用范围，现在前端也能直接操作剪切板。文中按照访问方式，分为间接访问和直接访问。
间接访问
交互事件
用户交互事件，如paste（复制）、cut（剪切）、dragstart（拖拽）等，能够通过事件对象Event，访问到剪切板。可以通过这部分操作，我们可以格式化、自定义剪切板中内容。在contenteditable（可编辑）元素中，为了统一粘贴文本样式，我们可以在元素的复制事件中，对文本格式进行过滤。
let editor = document.getElementById('editor)
editor.addEventListener('paste', e => {
e.preventDefault()
let data = e.clipboardData.getData('text/plain')
// 格式化粘贴xml标签
data = data.replace(/>/g, '>')
.replace(/</g, '<')
let result = data.split('/n').join('<br />')
document.execCommand('insertHTML', null, result)
})
除了文本，我们还能获取其他内容吗？比如图像？答案是一半一半。为什么说一半一半？
正常情况下，我们用截图软件截图，这部分是能在e.dataTransfer.files中获取到的，截图软件实际上是将base64文件放到了剪切板中。但是，假如我们在操作系统中复制一张图片，在dataTransfer对象中，是获取不到的，这是浏览器隐私协议限制，正如web页面不能直接操作系统文件（虽然部分浏览器已经支持File API）一样，遇到这种需求，需要先放一放。
在业务开发中，测试童鞋们，总是能给人一些惊喜，谁说只能粘贴，我还可以拖拽，拖拽一些奇奇怪怪的内容进去，看，又发现一个Bug。可编辑元素默认是允许拖拽的，为避免这种方式，给我们的选择只有两个，第一，禁止拖拽，可以，但是比较暴力，第二就是改写拖拽内容，监听dragstart事件。
let editor = document.getElementById('editor)
editor.addEventListener('dragstart', e => {
e.preventDefault()
// 获取页面选中文本
let selection = window.getSelection()
let data = selection.toString()
e.dataTransfer.setData('text/plain', data)
})
直接访问
clipboard API
最近navigator新增了Clipboard API，不仅能够对剪切板文本、文件读取，还提供了写的操作，但是兼容性较差。文本读写Chrome 66版本即支持，但是image/png得76+才行。返回值是Promise，用起来比较方便，但是对于剪切板的访问，首先需要运行在https服务页面中，其次需要请求用户授权，授权通过后，才能访问。基本使用示例如下：
// 读取文本
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现在被越来越多的公司纳入到桌面应用开发中。由于剪切板操作一直是web应用开发的一个痛点，在electron中，不管主进程还是渲染进程，都能使用剪切板API，操作也丰富许多，不仅能够操作文本、文件，还能操作Buffer,使得很多操作都成为可能。
const { clipboard } = require('electron')
clipboard.writeText('hello i am a bit of text!')
const text = clipboard.readText()
console.log(text)
网友评论