JS Clipboard API

最新推荐文章于 2025-06-11 11:41:59 发布

风茫

最新推荐文章于 2025-06-11 11:41:59 发布

阅读量658

点赞数 3

CC 4.0 BY-SA版权

文章标签： javascript

本文链接：https://blog.csdn.net/qq_46032105/article/details/131145850

本文介绍了ClipboardAPI在web应用程序中的应用，允许用户在获得权限后执行复制、粘贴和剪切操作。通过监听copy和paste事件，结合Navigator.clipboard接口，可以实现内容的无默认处理复制和从系统剪切板读取文本或图片数据。对于图片，它读取文件并转化为base64字符串显示；对于文本，可以直接插入到编辑器中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.作用

在web应用程序中，当用户授予了相应的权限，Clipboard API 就能实现系统剪切板的复制、粘贴和剪切功能。
系统剪切板暴露在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);
      });
    }
  });
}