当前位置: 首页 > 工具软件 > Clipboard.js > 使用案例 >

JavaScript | 文本复制工具clipboard.js的使用详解(使用clipboard复制ajax请求的数据)

沈飞跃
2023-12-01

我的微信公众号知行校园汇,点击查看,欢迎关注


我的其他平台(点击蓝字可访问):

GitHub  |  Gitee  |  哔哩哔哩  |  语雀  |  简书  |  微信小程序  |  知行达摩院

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-actiondata-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) )。

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

以上。

 类似资料: