【JavaScript】文本复制工具clipboard.js的使用详解

拾年之璐开发技术 2021-02-02 12:21:02 264 0

### 1. 什么是clipboard.js？

在`clipboard.js`官网（网址：[https://clipboardjs.com/](https://clipboardjs.com/)）上，它是这么介绍的：

![](https://img.zxdmy.com/md/20210131222219.png)

>   A modern approach to copy text to clipboard
>   No Flash. No frameworks. Just 3kb gzipped

简而言之，就是`现代化的文本复制工具，不依赖Flash，不不赖框架，压缩后仅3kb大小`。

总之，使用该脚本工具，可以轻松实现文本复制。

### 2. 哪里下载？

在官网就提供了下载链接。

可以使用npm工具安装：

```php
npm install clipboard --save
```

或者直接下载压缩包，链接：[https://github.com/zenorocha/clipboard.js/archive/master.zip](https://github.com/zenorocha/clipboard.js/archive/master.zip)

### 3. 使用

使用的时候，只需要使用script命令，引入该文件即可：

```javascript
<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
  
<input id="foo" type="text" value="这是input元素的value值" / >
<button class="btn" data-clipboard-action="copy" data-clipboard-target="#foo">点击复制< /button>

<textarea id="bar"> 这里的文本可被复制或者剪切 < /textarea>
<button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">点击剪切文字< /button>
      

<div>这是div元素里的文字< /div>
<button class="btn" data-clipboard-action="copy" data-clipboard-target="div">复制来自div的文字< /button>

<button class="btn" data-clipboard-text="这里的文字将被复制">复制自己的文字< /button>
```

JS为：

```js
	  //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);
      });
```

完整的HTML文件，见：[https://mp.weixin.qq.com/s/llPCLLTkvM0ZozW7dnz8dg](https://mp.weixin.qq.com/s/llPCLLTkvM0ZozW7dnz8dg)

当然，在上面这个代码的第2步，`data-clipboard-action` 除了可以为 `copy` ，还可以为 `cut` ，但是只能对`<input>` 或者 `<textarea>` 元素生效。

#### 4.2 高级用法

可以通过返回元素的方式，实现动态设置复制内容：

按钮定义为：

```html
<button class="btn">点击复制< /button>
<div>这里的内容将被复制< /div>
```

JS实现：

```js
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);
      });
```

可以通过返回文本的方式，实现动态设置复制内容：

HTML为：

```html
<button class="btn">Copy< /button>
```

JS 为：

```js
      var clipboard = new ClipboardJS('.btn', {
        text: function () {
          return '这里的文本将被复制';
        },
      });

//复制成功响应
      clipboard.on('success', function (e) {
        console.log(e);
      });

//复制失败响应
      clipboard.on('error', function (e) {
        console.log(e);
      });
```

### 5. 复制来自AJAX的数据

那么，问题来了。

有的业务，需要通过客户端点击的事件，通过ajax，访问数据库后，拿取数据，再进行复制。这种方案如何实现呢？

其实有比较简单的方法，直接在上面这个代码的 `function ()` 内部，写上ajax响应事件，然后在ajax的success中设置返回文本即可。如下：

```js
	//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
		//定义复制模块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) ）。

当然，如果业务更复杂，可以根据实际进行扩展。

### 6. 应用示例

访问：[http://zxxy.zxdmy.com](http://zxxy.zxdmy.com) ，可以查看该插件的具体应用示例。

>   项目技术栈：
>
>   后台：Laravel8
>
>   前端：WEUI+（网址：http://weui.shanliwawa.top/）

以上。

阅读全文