介绍
clipboard.js是 轻量级、无依赖 的JavaScript库，核心作用就是快速实现 浏览器端的复制到剪贴板 功能，不用写复杂的原生剪贴板API代码，也不需要依赖jQuery这类第三方库。
中文官网：
https://clipboard.nodejs.cn/
特点
- 无依赖：体积极小（压缩后仅几KB），直接引入就能用，不依赖任何框架；
- 使用简单：支持属性式调用（无需写太多JS）和编程式调用（灵活控制）两种方式；
- 兼容性好：兼容主流浏览器，包括Chrome、Firefox、Safari、Edge，也对移动端浏览器做了适配（低版本IE除外）；
- 场景覆盖：可以复制按钮、输入框、普通文本节点的内容，也能复制动态生成的文本。
适用场景
- 网页中的一键复制功能（如邀请码、优惠券、链接、代码片段）；
- 后台管理系统中复制ID、账号、配置信息；
- 移动端H5页面的复制功能（适配移动端浏览器）；
- 动态生成内容的复制（如接口返回的临时链接）。
安装
引入库
可以通过CDN直接引入，也可以npm安装后引入，推荐CDN快速使用：
<!-- 引入clipboard.js的CDN版本 -->
<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.11/dist/clipboard.min.js"></script>
npm安装方式
npm install clipboard --save
使用
方式1：属性式调用（最简洁，适合静态内容）
通过data-*自定义属性绑定触发元素（如按钮）和被复制元素（如文本容器），无需写复杂JS逻辑。
data-clipboard-target：指定被复制元素的选择器（复制已有元素的内容）；data-clipboard-text：直接指定要复制的固定文本（无需关联其他元素）。
例子：
<!-- 示例1：复制指定元素的内容 -->
<div id="copyText">我是要被复制的文本</div>
<!-- 触发按钮：data-clipboard-target绑定被复制元素的选择器 -->
<button class="btn" data-clipboard-target="#copyText">复制文本</button>
<!-- 示例2：直接复制固定文本 -->
<button class="btn" data-clipboard-text="直接复制我这段固定文字">复制固定文本</button>
<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.11/dist/clipboard.min.js"></script>
<script>
// 初始化实例，传入触发元素的选择器
const clipboard = new ClipboardJS('.btn');
// 复制成功的回调
clipboard.on('success', function(e) {
console.log('复制成功：', e.text);
alert('复制成功！');
// 清除选中的内容（可选，避免页面残留选中状态）
e.clearSelection();
});
// 复制失败的回调（如浏览器不支持）
clipboard.on('error', function(e) {
console.log('复制失败：', e.action);
alert('复制失败，请手动复制！');
});
</script>
方式2：编程式调用（更灵活，适合动态内容）
手动指定要复制的内容，适合内容由JS动态生成、没有对应DOM元素的场景：
<button id="dynamicBtn">复制动态生成的内容</button>
<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.11/dist/clipboard.min.js"></script>
<script>
// 初始化实例，绑定触发按钮
const clipboard = new ClipboardJS('#dynamicBtn', {
// 自定义要复制的内容
text: function() {
// 这里可以是任意动态生成的内容，比如接口返回值、变量等
return `当前时间：${new Date().toLocaleString()}`;
}
});
// 成功/失败回调（和属性式一致）
clipboard.on('success', e => {
alert('动态内容复制成功！');
e.clearSelection();
});
clipboard.on('error', e => {
alert('复制失败！');
});
</script>
总结
clipboard.js是轻量无依赖的JS库，专门解决浏览器端复制到剪贴板的需求，使用成本极低；- 支持属性式（简洁）和编程式（灵活）两种调用方式，覆盖静态/动态内容复制；
- 提供成功/失败回调，兼容主流浏览器，适合绝大多数前端复制场景；
- 单页应用需手动销毁实例，避免内存泄漏，其底层兼容了原生剪贴板API，比直接写原生代码更省心。