JS Clipboard API

1.作用

1. 在web应用程序中，当用户授予了相应的权限，Clipboard API 就能实现系统剪切板的复制、粘贴和剪切功能。
2. 系统剪切板暴露在Navigator.clipboard 中。

2.例子

window.onload = () => {
  // 监听用户的复制事件
  document.addEventListener('copy', (e) => {
    // 阻止浏览器的默认复制行为 
    e.preventDefault()
    // 把复制的内容放到系统的剪切板中  
    // navigator.clipboard.writeText 的返回值是一个Promise
    navigator.clipboard.writeText(e.target.innerText).then(() => {
      console.log('复制成功！');
    }).catch(() => {
      console.log('复制失败！');
    })
  })

  // 监听用户的粘贴
  document.addEventListener('paste', (e) => {
    // 验证输入
    const clipboardData = e.clipboardData;
    if (!clipboardData) {
      console.error('无效的输入。');
      return;
    }
    // 判断粘贴的是图片还是文本
    const files = clipboardData.files;
    if (files.length > 0) { // 图片
      e.preventDefault();
      const file = files[0];
      // 读取文件数据 转为base64字符串
      const reader = new FileReader();
      reader.onload = (event) => {
        // base64字符串 
        const data = event.target.result;
        let image = document.createElement('img')
        image.src = data
        document.querySelector('.editor').appendChild(image)
      };
      reader.onerror = (event) => {
        console.error('读取文件时出错。');
      };
      reader.readAsDataURL(file);
    } else { // 文本
      navigator.clipboard.readText().then((text) => {
        let divDom = document.createElement('div')
        divDom.innerHTML = text;
        document.querySelector('.editor').appendChild(divDom)
        console.log('粘贴成功！');
      }).catch((error) => {
        console.error('粘贴失败：', error);
      });
    }
  });
}