本文详细介绍JavaScript中实现内容复制到剪贴板的两种主要方式。首先分析已被弃用的execCommand方法，说明其通过input和textarea标签实现单行及多行复制的兼容做法。随后重点推荐现代浏览器支持的Clipboard API，展示其基于Promise的简洁实现。此外，针对Vue等前端框架中navigator.clipboard不可用的问题，提供了使用第三方clipboard库的完整集成步骤与注意事项。
背景
本文旨在记录如何利用JavaScript代码将指定内容写入系统剪贴板，以便用户后续在任意位置进行粘贴操作。
内容主要涵盖两个部分：
前两部分介绍execCommand方法。该方法目前已被标记为弃用（尽管在实际使用中仍可运行），且针对单行文本复制需配合input标签，多行文本复制则需配合textarea标签。
第三部分介绍当前推荐的Clipboard API，用于实现单行或多行内容的复制操作。
1、execCommand方法
此方法挂载于document对象下，虽已处于弃用状态，但鉴于其历史使用广泛且当前仍可用，此处仍予收录。
单行复制
通过创建input标签，将待复制内容赋值给其value属性，随后调用document对象下的execCommand方法执行复制命令。
具体实现如下：
handleCopy() {
let copy_text = '需要复制的内容';//拿到想要复制的值
let input_dom = document.createElement('input');//创建input元素
input_dom.value = copy_text;//添加需要复制的内容到value属性
document.body.appendChild(input_dom);//向页面底部追加输入框
input_dom.select();//选择input元素
document.execCommand("Copy");//执行复制命令
alert("复制成功！");//弹出提示信息，不同组件可能存在写法不同
//复制之后再删除元素，否则无法成功赋值
input_dom.remove();//删除动态创建的节点
},在页面需要触发复制功能的场景中，将上述逻辑绑定至相应的鼠标事件即可。
多行复制
通过创建textarea标签，将待复制内容赋值给其value属性。若内容需换行，应在相应位置添加换行符\r\n，随后调用document对象下的execCommand方法执行复制。
具体实现如下：
handleCopy() {
let copy_text = '第一行需要复制的内容\r\n第二行需要复制的内容';//拿到想要复制的值
let textarea_dom = document.createElement('textarea');//创建textarea元素
document.body.appendChild(textarea_dom);//向页面底部追加输入框
textarea_dom.value = copy_text; //添加需要复制的内容到value属性
textarea_dom.select();//选择input元素
document.execCommand("Copy");//执行复制命令
alert("复制成功！");//弹出提示信息，不同组件可能存在写法不同
//复制之后再删除元素，否则无法成功赋值
document.body.removeChild(textarea_dom); //删除动态创建的节点
}在页面需要触发复制功能的场景中，将上述逻辑绑定至相应的鼠标事件即可。
2、Clipboard API（推荐）
Clipboard API提供的navigator.clipboard.writeText方法能更简便地实现单行及多行内容复制。该方法返回一个Promise对象，便于处理复制成功或失败后的后续逻辑。
具体实现如下：
handleCopy() {
let copy_text = '第一行需要复制的内容\r\n第二行需要复制的内容';//拿到想要复制的值
// 使用Clipboard API复制文本到剪贴板中
navigator.clipboard.writeText(copy_text).then(() => {
alert("复制成功！")
}).catch((err)=>{
alert("复制失败！")
})
}在页面需要触发复制功能的场景中，将上述逻辑绑定至相应的鼠标事件即可。该方法直接支持包含换行符的内容复制。
注意：
上述navigator.clipboard.writeText方法仅存在于浏览器的navigator对象中。若在Vue、React等前端框架环境中直接调用此方法，可能会发现clipboard对象不存在。
原因在于，此类前端框架运行环境中的navigator对象并未提供clipboard对象，且该对象并非navigator的标准属性或方法。
因此，在这些框架中使用Clipboard API需借助第三方依赖库来实现。
以下以常见的Vue框架中使用Clipboard API为例进行说明：
1、首先安装第三方Clipboard依赖库
npm install clipboard --save2、在页面文件中引入该库，或在main.js中进行全局引入
import Clipboard from 'clipboard'3、在需要实现复制功能的方法中编写具体逻辑
<template>
<div>
<div class="copy_dom" @click="handleCopy"></div>
</div>
</template>
<script>
import Clipboard from 'clipboard';
export default {
data: {
clipboard: null
}
methods: {
handleCopy() {
// 传递事件绑定的元素class名和需要复制的内容text，创建Clipboard实例
this.clipboard = new Clipboard('.copy_dom', {
text: () => {
return '第一行需要复制的内容\r\n第二行需要复制的内容'
}
});
// 复制成功后的回调函数
this.clipboard.on('success', () => {
// 释放内存，非常重要，不然会重复触发回调函数
this.clipboard.destroy();
console.log('复制成功！');
})
// 复制失败后的回调函数
this.clipboard.on('error', function(e) {
console.log('复制失败！');
})
}
},
//beforeDestroy() {
// this.clipboard.destroy(); //组件页面销毁时，需要手动清理clipboard，释放内存
//}
}
</script>在上述代码中，建议在clipboard实例复制成功的回调函数中执行destroy方法以销毁实例；或者在页面组件的beforeDestroy生命周期钩子中执行销毁方法。
以上即为使用Javascript实现复制粘贴功能的示例代码的详细内容，更多关于Javascript复制粘贴功能的资料请关注本站其它相关文章！