实战技巧：如何在JavaScript中使用clipboard.js复制Ajax请求数据？
最编程
2024-01-24 17:52:24
...
我的微信公众号：知行校园汇，点击查看，欢迎关注
1. 什么是clipboard.js？
在clipboard.js官网（网址：https://clipboardjs.com/）上，它是这么介绍的：
A modern approach to copy text to clipboard
No Flash. No frameworks. Just 3kb gzipped
简而言之，就是现代化的文本复制工具，不依赖Flash，不不赖框架，压缩后仅3kb大小。
总之，使用该脚本工具，可以轻松实现文本复制。
2. 哪里下载？
在官网就提供了下载链接。
可以使用npm工具安装：
npm install clipboard --save
或者直接下载压缩包，链接：https://github.com/zenorocha/clipboard.js/archive/master.zip
3. 使用
使用的时候，只需要使用script命令，引入该文件即可：
<script src="dist/clipboard.min.js"></script>
4. 使用方法概述
4.1 基本的使用方法
首先给input，或者textarea等，甚至于div元素，设置id，以及value值或者默认值；
然后设置点击按钮input或者button，通过 data-clipboard-action 和 data-clipboard-target 属性，绑定事件；
最后在js中实例化clipboard。
如下示例，将给出完整的基本示例，详细过程请见注释：
<!-- 该代码可直接创建HTML文件运行 -->
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>target-input</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<!-- 1. 定义一些标记 -->
<!-- 2. 设置按钮 -->
<!-- 示例1：复制input元素的value值 -->
<input id="foo" type="text" value="这是input元素的value值" />
<button class="btn" data-clipboard-action="copy" data-clipboard-target="#foo">点击复制</button>
<!-- 示例2：剪切textarea元素的值 -->
<textarea id="bar">这里的文本可被复制或者剪切</textarea>
<button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">点击剪切文字</button>
<!-- 示例3：复制div元素的值 -->
<div>这是div元素里的文字</div>
<button class="btn" data-clipboard-action="copy" data-clipboard-target="div">复制来自div的文字</button>
<!-- 示例4：复制button自己设置的值 -->
<button class="btn" data-clipboard-text="这里的文字将被复制">复制自己的文字</button>
<!-- 3. 引入库文件 -->
<!-- <script src="../dist/clipboard.min.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.6/clipboard.min.js"></script>
<script>
//4. 实例化clipboard
var clipboard = new ClipboardJS('.btn');
//5. 复制成功的响应事件【按F12控制台可见】
clipboard.on('success', function (e) {
console.log(e);
//打印动作信息（copy或者cut）
console.info('Action:', e.action);
//打印复制的文本
console.info('Text:', e.text);
//打印trigger
console.info('Trigger:', e.trigger);
});
//6. 复制失败的响应事件
clipboard.on('error', function (e) {
console.log(e);
console.error('Action:', e.action);
console.error('Trigger:', e.trigger);
});
</script>
</body>
</html>
当然，在上面这个代码的第2步，data-clipboard-action 除了可以为 copy ，还可以为 cut ，但是只能对<input> 或者 <textarea> 元素生效。
4.2 高级用法
可以通过返回元素的方式，实现动态设置复制内容：
<!-- 该代码可直接创建HTML文件运行 -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>function-target</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<!-- 1. 基本信息定义 -->
<button class="btn">点击复制</button>
<div>这里的内容将被复制</div>
<!-- 2. 引入库文件 -->
<!-- <script src="../dist/clipboard.min.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.6/clipboard.min.js"></script>
<script>
//3. 实例化clipboard
var clipboard = new ClipboardJS('.btn', {
target: function () {
//获取文档中第一个 <div> 元素：
return document.querySelector('div');
//返回文档中id为copy-btn的元素
//document.querySelector("#copy-btn");
//返回文档中 class="btn" 的第一个元素:
//document.querySelector(".btn");
//返回文档中 class="btn" 的第一个 <p> 元素:
//document.querySelector("p.btn");
//还有更多方法，可自行百度
},
});
//复制成功响应
clipboard.on('success', function (e) {
console.log(e);
});
//复制失败响应
clipboard.on('error', function (e) {
console.log(e);
});
</script>
</body>
</html>
可以通过返回文本的方式，实现动态设置复制内容：
<!-- 该代码可直接创建HTML文件运行 -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>function-text</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<!-- 1. 定义基本元素 -->
<button class="btn">Copy</button>
<!-- 2. 引入库文件 -->
<!-- <script src="../dist/clipboard.min.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.6/clipboard.min.js"></script>
<script>
//3. 实例化clipboard
var clipboard = new ClipboardJS('.btn', {
text: function () {
return '这里的文本将被复制';
},
});
//复制成功响应
clipboard.on('success', function (e) {
console.log(e);
});
//复制失败响应
clipboard.on('error', function (e) {
console.log(e);
});
</script>
</body>
</html>
5. 复制来自AJAX的数据
那么，问题来了。
有的业务，需要通过客户端点击的事件，通过ajax，访问数据库后，拿取数据，再进行复制。这种方案如何实现呢？
其实有比较简单的方法，直接在上面这个代码的 function () 内部，写上ajax响应事件，然后在ajax的success中设置返回文本即可。如下：
//3. 实例化clipboard
var clipboard = new ClipboardJS('.btn', {
text: function () {
//return '这里的文本将被复制';
//
$.ajax({
url: '请求的链接',
type: 'POST',
//POST的数据
data: {
_token: $("input[name='_token']").val(),
id: $("input[name='id']").val(),
},
//异步调用关闭
async: false,
//请求成功：
success: function (result) {
//返回成功的文本
return result.data;
},
//请求出错
error: function (e) {
//弹窗提示
alert(e.message)
}
});
},
});
当然，还有更好的方式。
下面给出一种比较好的参考方案，是一个通过id请求数据库的一个字段为link（可能为资源分享吧）文本的示例：
//定义复制模块JS代码
const pageCtrl = {
//发送AJAX请求，生成复制的文本，el是传递数据的
_codeGenerator: function (el) {
const $el = $(el);
$.ajax({
url: '请求的URL',
type: 'POST',
data: {
_token: el.data('_token'),
id: el.data('id'),
},
//移步请求一定要关闭（false）
async: false,
success: function (result) {
//可以打印请求后的数据
console.log(result.status);
//返回成功结果
if (result.status === 'success') {
$el.data('result', result.data[0].link);
}
//否则，操作失败，根据具体失败情形提示
else {
//弹窗提示
$.alert(result.msg, '操作失败');
//返回结果不要漏
$el.data('result', "");
}
}
});
},
/* 复制功能*/
_clip: function () {
const _self = this;
const clipboard = new ClipboardJS('.copy-btn', {
text: function (el) {
//构造参数
const $el = $(el);
//设置初始值
$el.data("_token", $("input[name='_token']").val());
$el.data('id', $("input[name='id']").val());
//ajax请求并设置要复制的字符串
_self._codeGenerator($el);
//返回复制结果
return $el.data('result');
}
});
//复制成功后的方法
clipboard.on('success', function (e) {
// console.log(e.text)
$.alert('链接：' + e.text + ' 已复制', '复制成功'
});
//复制失败后的方法
clipboard.on('error', function (e) {
console.log(e);
$.alert('复制失败，请重试！', '复制失败',)
});
},
//初始化方法
init: function () {
this._clip();
}
};
$(function () {
//初始化
pageCtrl.init();
})
这个示例需要引入JQ（ajax请求）和weui（弹窗，或者把$.alert(‘A’, ‘B’,)修改为普通弹窗alert(A) ）。
当然，如果业务更复杂，可以根据实际进行扩展。
以上。