clipboard.js是怎么实现复制内容到剪切板的？能复制一张图片到剪切板吗？clipboard.js是怎么实现复制内

写在前面

产品MM：我想页面上有个按钮，点击之后复制一段链接到系统剪切板。

开发GG：没问题

1 引入clipboard.js

<script 
    type="text/javascript" 
    src="script/clipboard.min.js">
</script>

2 创建一个带有 .btn类的按钮（或其他）元素，指定下要复制的文本

<body>
    <button 
        class="btn" 
        data-clipboard-text="http://www.jq22.com/">
        点击复制
    </button>
</body>

3 实例化之

<!-- 页面底部 实例化 clipboard，将 .btn 
元素初始化上复制动作 -->
<script type="text/javascript">  
    window.onload = function() {  
        var clipboard = new Clipboard('.btn');  
    }  
</script>

一气呵成~~~

产品MM：@开发GG 666，这个东西的实现原理是啥？

开发GG：en....不...知道...+_+

复制文本到剪切板的实现原理是什么呢？

1、使用`document`对象的`execCommand`方法实现拷贝

document.execCommand('copy')

MDN上面的文档是这么描述的：当一个HTML文档切换到设计模式时，document暴露 execCommand 方法，该方法允许运行命令来操纵可编辑内容区域的元素。

来来来，实现思路如下：

1 手动创建可编辑元素，比如textarea，然后将要拷贝的值设置为它的Value
2 将textarea插入页面，调用textarea的 select() 方法将值选中
3 注意textarea要设置样式为不可见(使用样式将其移出可视区域即可)
4 调用document.execCommand('copy')
5 实现复制到剪切板之后将生成的辅助节点（textarea）移除

相关代码

function copy2clipboard(copyText) {
    //1 手动创建可编辑元素，比如textarea，
    var textArea = document.createElement('textarea');
    //2 然后将要拷贝的值设置为它的Value
    textArea.value = copyText
    //将textarea插入页面
    document.body.appendChild(textArea)
    //调用textarea的 select() 方法将值选中
    textArea.select();
    // 3 textarea要设置样式为不可见(使用样式将其移出可视区域即可)
    textArea.style.position = 'fixed';
    textArea.style.top = '-9999px';
    textArea.style.left = '-9999px';
    // 4 调用document.execCommand('copy')
    document.execCommand('copy')// 复制
    // document.execCommand('cut')// 剪切
}

优点

兼容性好，操作简单

缺点

1、只能将选中的内容复制到剪贴板，无法向剪贴板任意写入内容

2、它是同步操作，如果复制/粘贴大量数据，页面会出现卡顿。有些浏览器还会跳出提示框，要求用户许可，这时在用户做出选择前，页面会失去响应

2、最新的api实现使用 `navigator.clipboard` 对象

navigator.clipboard MDN地址

function copy2clipboard(text) {
    navigator.clipboard.writeText(text)
      .then(function () {
          console.log('success')
      }, function (e) {
          console.log(e)
          console.log('fail')
      });
}

优点

支持Promise，支持向剪切板中写入文件、图片等...

缺点

1、Chrome 浏览器规定，只有 HTTPS 协议的页面才能使用这个 API，不过localhost是可以的

2、调用时需要明确获得用户的许可

3、兼容性可能没那么好

navigator.clipboard 进阶用法

存一个图片到剪切板

function setHtmlToClipboard(text) {
  navigator.permissions.query({ name: 'clipboard-write' }).then(async (result) => {
        if (result.state === 'granted') {
            // 复制一段文本
            // var blob = new Blob(['<p>... paragraph ...</p>'], { type: 'text/plain' });
            // var item = new ClipboardItem({ 'text/plain': blob });
            const imgURL = 'https://dummyimage.com/300.png';
            const data = await fetch(imgURL);
            const blob = await data.blob();
            var item = new ClipboardItem({
                [blob.type]: blob
            })
            navigator.clipboard.write([item]).then(function () {
                console.log("Copied to clipboard successfully!");
            }, function (error) {
                console.error("unable to write to clipboard. Error:");
                console.log(error);
            });
        } else {
            console.log("clipboard-permissoin not granted: " + result);
        }
    });
}