javascript剪贴板API如何使用_如何读取和写入剪贴板？-js教程-PHP中文网

javascript剪贴板API如何使用_如何读取和写入剪贴板？

夢幻星辰

发布： 2025-12-18 18:56:49

原创

880人浏览过

JavaScript剪贴板API需在HTTPS或localhost安全上下文中，由用户手势触发；writeText()和readText()均返回Promise，支持文本读写，Chrome 115+实验性支持图片写入，Safari读取受限，建议检查权限并兼容降级。

javascript剪贴板api如何使用_如何读取和写入剪贴板？

JavaScript 剪贴板 API（navigator.clipboard）可以安全地读写系统剪贴板，但必须在安全上下文（HTTPS 或 localhost）中运行，且需要用户主动触发（比如点击事件），不能自动执行。

写入文本到剪贴板

调用 clipboard.writeText() 方法，返回 Promise：

成功时 resolve，无返回值
失败时 reject（如权限被拒、非用户手势触发）

示例：

FlowMuse AI

节点式AI视觉创作引擎

查看详情

button.addEventListener('click', async () => {
  try {
    await navigator.clipboard.writeText('Hello, world!');
    console.log('已复制到剪贴板');
  } catch (err) {
    console.error('复制失败:', err);
  }
});

登录后复制

读取文本内容

使用 clipboard.readText()，同样返回 Promise：

立即学习“Java免费学习笔记（深入）”；

仅支持纯文本，不支持 HTML 或富文本（除非手动解析）
部分浏览器（如 Safari）可能限制读取，需明确用户授权

示例：

button.addEventListener('click', async () => {
  try {
    const text = await navigator.clipboard.readText();
    console.log('剪贴板内容:', text);
  } catch (err) {
    console.error('读取失败:', err);
  }
});

登录后复制

处理权限与兼容性

不是所有浏览器都默认允许剪贴板访问，建议检查权限状态：

用 navigator.permissions.query({ name: 'clipboard-read' }) 或 'clipboard-write' 查询
Chrome/Edge 94+ 支持无提示写入（只要在用户手势内）；读取仍可能弹权限请求
Safari 对 readText() 限制较严，有时会静默拒绝
旧版可用 document.execCommand('copy') 降级（需配合 <textarea></textarea> 操作，已废弃但仍有兼容价值）

写入图片（实验性支持）

Chrome 115+ 支持 clipboard.write() 写入图片 Blob：

需构造 ClipboardItem，传入 { 'image/png': blob } 等格式
目前仅限 PNG/JPEG，且需用户手势 + 安全上下文
暂不推荐生产环境依赖，可用作增强体验

示例片段：

const blob = await fetch('logo.png').then(r => r.blob());
await navigator.clipboard.write([
  new ClipboardItem({ 'image/png': blob })
]);

登录后复制

基本上就这些。核心原则：用户触发、HTTPS、处理 Promise 异常、兼顾老浏览器可选降级。不复杂但容易忽略上下文和权限细节。

以上就是javascript剪贴板API如何使用_如何读取和写入剪贴板？的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

如何用javascript创建图形_canvas API基础是什么？ javascript如何实现组件化_如何定义组件 javascript框架是什么_React和Vue有什么区别 JavaScript日期如何操作_Date对象有哪些方法？ Javascript如何进行单元测试？