如何使用copy-to-clipboard：3分钟快速实现浏览器文本复制功能

【免费下载链接】copy-to-clipboard Copy stuff into clipboard from your browser using JS 项目地址: https://gitcode.com/gh_mirrors/co/copy-to-clipboard

在现代网页开发中，实现浏览器文本复制功能是提升用户体验的重要环节。copy-to-clipboard 是一个轻量级 JavaScript 库，能够帮助开发者快速集成跨浏览器的文本复制功能，无需复杂的原生 API 操作。本文将带你3分钟掌握这个实用工具的使用方法，让你的网页轻松拥有一键复制功能。

为什么选择 copy-to-clipboard？

copy-to-clipboard 库的核心优势在于其简单易用和广泛的浏览器兼容性。它会自动检测浏览器环境，优先使用现代浏览器支持的 execCommand API，对 IE 等旧浏览器则使用 clipboardData 接口，最后还会 fallback 到传统的提示框（prompt）方式，确保在各种环境下都能正常工作。

快速安装指南

npm 安装（推荐）

如果你使用 npm 管理项目依赖，只需在终端运行以下命令：

npm i --save copy-to-clipboard

直接引入 CDN

如果你不想通过 npm 安装，可以直接在 HTML 中引入 CDN 资源：

<script src="https://wzrd.in/standalone/copy-to-clipboard@latest" async></script>

引入后，全局对象 window.copyToClipboard 将可用。

基础使用方法

最简单的复制示例

引入库后，使用 copyToClipboard 函数即可实现文本复制：

// 导入库（npm 方式）
import copy from 'copy-to-clipboard';

// 复制文本
copy('这是要复制的文本内容');

如果使用 CDN 方式引入，则直接调用全局函数：

copyToClipboard('这是要复制的文本内容');

带选项的复制

copy-to-clipboard 还支持传入选项对象，定制复制行为：

copy('带格式的文本', {
  debug: true, // 启用调试模式，输出控制台信息
  message: '按 #{key} 复制文本', // 自定义提示信息
  format: 'text/plain' // 指定 MIME 类型，如 'text/html' 可复制 HTML 内容
});

其中 #{key} 会根据操作系统自动替换为 ⌘+C（macOS）或 Ctrl+C（Windows/Linux）。

实际应用场景

1. 复制静态文本

在示例页面 example/index.html 中，展示了基本文本复制功能：

<button onclick="copyToClipboard('Hello, copy-to-clipboard!')">
  点击复制示例文本
</button>

2. 复制多行文本

对于多行文本，库同样支持：

const multilineText = `这是第一行
这是第二行
这是第三行`;

copyToClipboard(multilineText);

3. 复制 HTML 内容

通过指定 format: 'text/html'，可以复制 HTML 内容：

copy('<strong>加粗文本</strong>', { format: 'text/html' });

浏览器兼容性

copy-to-clipboard 几乎支持所有现代浏览器，包括：

• Chrome、Firefox、Safari 10+
• Edge
• IE（部分支持，使用 clipboardData 接口）

注意：部分旧版 iOS 设备可能无法正常工作，Safari 8 及以下版本由于 prompt 限制也存在兼容性问题。

测试与验证

项目提供了完整的测试用例，位于 tests/ 目录下，包含基本功能、多行文本、富文本等场景的测试。你可以通过以下命令运行测试：

# 克隆仓库
git clone https://gitcode.com/gh_mirrors/co/copy-to-clipboard

# 安装依赖
cd copy-to-clipboard
npm install

# 运行测试
npm test

总结

copy-to-clipboard 是一个小巧而强大的工具，让浏览器文本复制功能的实现变得简单高效。无论是复制简单文本、多行内容还是 HTML 格式，它都能轻松应对，并且提供了良好的浏览器兼容性。通过本文的介绍，你已经掌握了它的基本使用方法，现在就可以在你的项目中集成这个实用功能，提升用户体验！

如果你想深入了解更多高级用法，可以查看项目的 README.md 文档，里面详细介绍了 API 选项和扩展功能。

【免费下载链接】copy-to-clipboard Copy stuff into clipboard from your browser using JS 项目地址: https://gitcode.com/gh_mirrors/co/copy-to-clipboard