1. 概述
 
 clipboard.js是一款轻量级的实现复制文本到剪贴板功能的JavaScript插件。通过该插件可以将输入框，文本域，DIV元素中的文本等文本内容复制到剪贴板中 
 clipboard.js支持主流的浏览器：chrome 42+; Firefox 41+; IE 9+; opera 29+; Safari 10+; 
 官网
 
 2. 使用方式
 
 2.1 引入js文件
 
 以下所有的代码都使用到以下js文件
 
<script src="/web2/component/clipboard/1.6.1/clipboard.js"></script> 
 
1
 
 clipboard复印内容的方式有 
 - 从target复印目标内容 
 - 通过function 要复印的内容 
 - 通过属性返回复印的内容
 
 2.2 从target复印目标内容
 
 可以从input、textare、div中通过copy/cut获取内容目标内容，其HTML的代码如下
 
input 
 data-clipboard-target指向复印节点，这里指input的目标id 
 data-clipboard-action这里使用copy，同时也可以使用cut，则点击按钮后，内容里的值被剪切。如果没有指定，则默认值是copy。cut只能在input和textare中起作用
 
<input id="foo" type="text" value="hello">
<button class="btn" data-clipboard-action="copy" data-clipboard-target="#foo">Copy</button>
 
1
2
 
textare 
 和上面的主要区别只是input和textare不同
 
<textarea id="bar">hello</textarea> 
<button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">Cut</button>
 
1
2
 
div 
 和上面的主要区别只是input和div不同
 
<div>hello_div</div>
<button class="btn" data-clipboard-action="copy" data-clipboard-target="div">Copy</button>

 
1
2
3
 
 以上的插件的初始化JS代码都是相同：
 
   <script>
       // button的class的值
        var clipboard = new Clipboard('.btn');
        clipboard.on('success', function(e) {
            console.log(e);
        });

        clipboard.on('error', function(e) {
            console.log(e);
        });
    </script>

 
1
2
3
4
5
6
7
8
9
10
11
12
 
 2.3 通过function 要复印的内容
 
 通过target，text的function复印内容
 
通过target的function复印内容 
 通过target指定要复印的节点，这里返回舒值是‘hello’
 
    <button class="btn">Copy_target</button>
    <div>hello</div>

    <script>
    var clipboard = new Clipboard('.btn', {
    // 通过target指定要复印的节点
        target: function() {
                   return document.querySelector('div');
              }
    });

    clipboard.on('success', function(e) {
        console.log(e);
    });

    clipboard.on('error', function(e) {
        console.log(e);
    });
    </script>

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
通过text的function复印内容 
 text的function指定的复印内容，这里返回‘to be or not to be’
 
 <button class="btn">Copy</button>
 <script>
    var clipboard = new Clipboard('.btn', {
    // 点击copy按钮，直接通过text直接返回复印的内容
        text: function() {
            return 'to be or not to be';
        }
    });

    clipboard.on('success', function(e) {
        console.log(e);
    });

    clipboard.on('error', function(e) {
        console.log(e);
    });

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
 2.4 通过属性返回复印的内容
 
 通过data-clipboard-text属性返回复印的内容
 
单节点 
 通过id指定节点对象，并做为参数传送给Clipboard。这里的返回值的内容是data-clipboard-text的内容
 
// 通过id获取复制data-clipboard-text的内容 
<div id="btn" data-clipboard-text="1">
        <span>Copy</span>
</div>

<script>
    var btn = document.getElementById('btn');
    var clipboard = new Clipboard(btn);

    clipboard.on('success', function(e) {
        console.log(e);
    });

    clipboard.on('error', function(e) {
        console.log(e);
    });
    </script>

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
多节点 
 通过button返回所有button按钮，并做为参数传送给Clipboard。每个按钮被点击时，返回值的内容是其对应的data-clipboard-text的内容，分别是1，2，3
 
//  多节点获取button的data-clipboard-text值
 <button data-clipboard-text="1">Copy</button>
    <button data-clipboard-text="2">Copy</button>
    <button data-clipboard-text="3">Copy</button>
<script>
    var btns = document.querySelectorAll('button');
    var clipboard = new Clipboard(btns);

    clipboard.on('success', function(e) {
        console.log(e);
    });

    clipboard.on('error', function(e) {
        console.log(e);
    });
    </script>

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
多节点 
 通过class获取所有button按钮，并做为参数传送给Clipboard。每个按钮被点击时，返回值的内容是其对应的data-clipboard-text的内容，分别是1，2，3
 
//   通过class注册多个button，获取data-clipboard-text的值
<button class="btn" data-clipboard-text="1">Copy</button>
    <button class="btn" data-clipboard-text="2">Copy</button>
    <button class="btn" data-clipboard-text="3">Copy</button>
 <script>
    var clipboard = new Clipboard('.btn');

    clipboard.on('success', function(e) {
        console.log(e);
    });

    clipboard.on('error', function(e) {
        console.log(e);
    });
    </script>

 
描述一下之前做过的一个需求，一个订单详情页面内同时存在多个复制按钮，点击复制按钮时，分别拷贝对应的文本，并触发相应事件。
 
看了一下官网的描述,官方推荐的写法如下：
 
 Copy to clipboard 
 
这样的写法用于页面内仅有一个复制button时是没有问题的，但是我当前遇到的需求是，页面内存在N个复制button,点击时就出现了重复复制上一个传入文本的问题。在翻了很多相关使用clipboard.js的文章后，发现还是没有找到好的解决方案。自己瞎捣鼓了一套解决方案，附上代码，大家如有遇到类似的需求，也可以尝试从这个方向来解决问题。//template部分，省略多个类似button定义
 
//couponItem为外层传入的券码对象，对象内仅包含券码和一个状态值
 

 
class="button--copy tc btn"
 
:id="'product-'+couponItem.coupon"
 
@click="copyText(`#product-${couponItem.coupon}`, true)"
 
:data-clipboard-text="couponItem.coupon"
 
>复制
 
import Clipboard from 'clipboard' //需要提前npm该插件
 
//methods部分
 
copyText (copyId, status) {
 
let clipboard = new Clipboard(copyId, {
 
text: function (trigger) {
 
return trigger.getAttribute('data-clipboard-text')
 
}
 
})
 
clipboard.on('success', e => {
 
if (status) {
 
this.doSomething()// 执行相关操作
 
console.log('券码复制成功')
 
} else {
 
console.log('复制成功')
 
}
 
clipboard.destroy()
 
})
 
clipboard.on('error', e => {
 
clipboard.destroy()
 
})
 
}
 
// 调用方法完必须销毁clipboard，以免后续调用时复制的值错乱
 
button内的传入id为自定义产生的一个唯一值，可根据实际情况自定义传入参数。(但是必须保证其唯一性)
 
大家如果有更简单的解决方案也欢迎大家留言，互相学习下。For love and peace.
 
我的邮箱747379968@qq.com,欢迎指教。:)

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

 
 
 
我的其他平台（点击蓝字可访问）：
 
 
 
 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-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) ）。
 
当然，如果业务更复杂，可以根据实际进行扩展。
 
以上。

软件开发中复制粘贴是一种比较常见的功能，如复制微信号引导用户粘贴去搜索关注，还有常见的复制图片进行粘贴。
 
Electron中的clipboard模块就是用来实现这些功能的，该模块可以复制粘贴文本、复制粘贴图片、复制粘贴html等等，以下是代码实现。
 
主进程文件main.js代码如下：
 
// main.js
const { app, BrowserWindow } = require("electron");
const path = require("path");


const createWindow = () => {
    // 创建窗口
    const mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            // 开启node
            nodeIntegration: true,
            // 取消上下文隔离
            contextIsolation: false,
            // 开启remote
            enableRemoteModule:true,
        }
    });
    // 加载本地文件
    mainWindow.loadFile(path.join(__dirname, "index.html"));
    // 加载远程地址
    // mainWindow.loadURL('https://github.com');

    // 开启调试模式
    mainWindow.webContents.openDevTools();

};


// 监听应用的启动事件
app.on("ready", createWindow);

// 兼容MacOS系统的窗口关闭功能
app.on("window-all-closed", () => {
    // 非MacOS直接退出
    if (process.platform != "darwin") {
        app.quit();
    }
});

// 点击MacOS底部菜单时重新启动窗口
app.on("activate", () => {
    if (BrowserWindow.getAllWindows.length == 0) {
        createWindow();
    }
})
 
渲染进程文件index.html代码如下：
 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Electron开发</title>
</head>
<body>
	<p>Electron注册全局快捷键及剪切板功能</p>
    <div>
        密钥：<span id="code" style="color:red">341AADF134WR414AF41</span>
    </div>
    <br>
    <div>
        <button id="button" style="margin-right:10px;">粘贴密钥</button>
        <input type="text" style="width:200px;">
    </div>
    <br>
    <div>
        <button id="copyImage">复制图片</button>
    </div>
    <br>
    <script src="./renderer/clipboard.js"></script>
</body>

</html>
 
渲染进程文件index.html中引入的clipboard.js文件代码：
 
var { clipboard,nativeImage}=require("electron");


var code = document.querySelector("#code");
var button = document.querySelector("#button");
var input = document.querySelector("input");
// 点击复制密钥
code.onclick=function(){
    clipboard.writeText(code.innerHTML);
    alert("复制成功!");
};

// 点击粘贴密钥
button.onclick = function(){ 
    // 获取复制的内容
    input.value = clipboard.readText();
};




var copyImage = document.querySelector("#copyImage");

// 点击复制图片
copyImage.onclick = function(){

    var image = nativeImage.createFromPath("static/love.png");
    clipboard.writeImage(image);
    // base64图片编码
    var imageSrc = clipboard.readImage().toDataURL();

    // 新建图片插入
    var newImage = new Image();
    newImage.src = imageSrc;
    newImage.style.width = "100px";
    newImage.style.height = "100px";

    document.body.appendChild(newImage);

}
 
效果图如下：