复制文字到剪贴板的几种方法

工作中经常会遇到复制文字到剪贴板的需求，今天来整理一下几种方法。

1. 浏览器的复制命令

当一个HTML文档切换到设计模式时，document暴露 execCommand 方法，该方法允许运行命令来操纵可编辑内容区域的元素。（兼容性不优秀）

命令

copy
拷贝当前选中内容到剪贴板。启用这个功能的条件因浏览器不同而不同，而且不同时期，其启用条件也不尽相同。使用之前请检查浏览器兼容表，以确定是否可用。

cut
剪贴当前选中的文字并复制到剪贴板。启用这个功能的条件因浏览器不同而不同，而且不同时期，其启用条件也不尽相同。使用之前请检查浏览器兼容表，以确定是否可用。

<input ref="copyUrl" readonly v-model="inviteUrl"/>
<el-button type="danger" @click="copy()" class="copy_text">复制文本el-button>

// ts代码
  private copy(inviteUrl: string) {
     
    const oInput = this.$refs.copyUrl as any; //仍然使用ref，不推荐直接操作dom
    const text = this.inviteUrl;
    oInput.value = text;
    oInput.select(); //选择对象
    document.execCommand('copy'); //执行复制命令
    this.$message('复制成功'); //提示用户复制成功，如是移动端则修改提示方式
  };

2. Clipboard.js

它不依赖flash, 不依赖其他框架，gzip压缩后只有3kb大小,兼容性优秀

可以通过npm工具安装

   npm install clipboard --save

引入位于 dist 目录下的脚本文件，或者从第三方CDN 那里获取资源

   <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js"></script>

<input type="text" id="copyData" readonly value="被复制信息" />
<button class="copyBtn"   data-clipboard-target="#copyData">点击复制button>

//实例化 ClipboardJS对象;
	const copyBtn = new ClipboardJS('.copyBtn');
	copyBtn.on("success",function(e){
     
	    // 复制成功
	    console.log(e.text);
	    e.clearSelection();
	});
	copyBtn.on("error",function(e){
     
	    //复制失败；
	    console.log(e.action)
	});

3. 小程序，使用其api即可，事实上也是应用了Clipboard.js

//
	buttonClickHandel() {
     
		wx.setClipboardData({
     
			data: this.orderSn,
			success() {
     
				wx.showToast({
     
					title: '复制成功'
				})
			}
		})
	}

总结

以上就是复制文字到剪贴板的几种方法，具体的使用可根据项目需求进行更改，谢谢阅读