Clipboard是浏览器的一套复制粘贴相关的api,具体用法直接看下方代码
// 监听复制事件
document.addEventListener('copy', (e) => {
e.preventDefault();// 阻止默认事件,使复制失败
navigator.clipboard.writeText('hello');// 写入内容到剪贴板
})
// 读取剪贴板的内容
navigator.clipboard.readText().then((text) => {// 因为要获取用户允许,所以返回的是一个promise
console.log(text);
})
// 监听粘贴事件
document.addEventListener('paste', (e) => {
if (e.clipboardData?.files.length > 0) {// 如果长度大于0,说明是粘贴的图片
e.preventDefault();
const file = e.clipboardData.files[0];
const reader = new FileReader();// 创建一个文件读取器
reader.onload = (e) => {
console.log(e.target.result);// 得到一个base64编码的图片
}
reader.readAsDataURL(file);// 读取文件
}
})