前端实现复制文字和图片，原来这么简单！

2023-08-29 11:14 由 Chenkai_Zhou 发表于 #前端开发

1.功能需求

实习工作中，遇到一个需求，需要完成点击复制的功能，当文字过长的时候，让用户手拖再ctrl+c这种方式体验就不是很好了，如果可以点击一下直接复制就是一种不错的优化用户体验的方式。

经过查阅文档，网络上完成这个功能大多使用两大类方法

第一种是以document.execCommand() 方法为主，无论是手写还是使用clipboard.js插件都是依赖的这个方法，但是在MDN 文档中已经显示过时了。

第二种是用了navigator.clipboard的方法，避免了过时问题，但是在复制图片的时候会有一定的浏览器兼容性问题

2.document.execCommand('copy')

这个方法其实就是在模拟用户选择元素然后右键复制的动作。尽管MDN已经显示这个方法过时了，但是仅针对copy这个指令，大部分主流浏览器都可以支持，所以这个方法仍然可以作为一种实现问题的方案。

2.1 基本用法

根据MDN文档学习本方法的传参和返回值

语法

bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)

这个方法可以传3个参数，并且会返回一个布尔值

返回值

先从返回值开始，返回值相对比较简单，如果返回的值是false就表示浏览器不支持使用这个操作，反之浏览器支持该操作就返回true。

虽然这个返回值看似可以用来提前判断浏览器兼容性，但是文档中不推荐在调用一个命令前，尝试使用返回值去校验浏览器的兼容性

参数值

参数一共可以传3个，但是使用复制命令的时候只需要传第一个参数就可以。这里简单介绍一下3个参数

aCommandName：一个字符串类型的参数，是命令的名称，比如复制用到的copy，剪切用到的cut
aShowDefaultUI：一个布尔类型的参数，表示是否展示用户界面，一般为false，Mozilla 没有实现
aValueArgument：一些命令（例如 insertImage）需要额外的参数（insertImage 需要提供插入 image 的 url），默认为 null。

简单举例

以本文主要讲的复制命令为例子：document.execCommand('copy')

指令兼容性问题

前文讲到，MDN不推荐在调用一个命令前，尝试使用返回值去校验浏览器的兼容性，那么就需要用另外的方法去检测浏览器是否支持某个指令，浏览器为我们提供了一个方法叫document.queryCommandSupported()，使用这个方法可以检测浏览器是否支持某个指令，这个方法比较简单，只有1个参数，参数就传指令字符串，方法的返回值是一个布尔值表示当前浏览器是否支持这个指令。

举例如下：

    if(document.queryCommandSupported && document.queryCommandSupported('copy')){
        //先检测是否支持document.queryCommandSupported和copy指令
        //如果都支持直接执行指令
        document.execCommand('copy')
    }

MDN文档中提到，document.queryCommandSupported也被弃用了，但是为了兼容性依然保留可用，当我们使用document.execCommand的时候仍然可以用document.queryCommandSupported来检测是否支持。同时，它的浏览器兼容性也是比较好的，大部分主流浏览器都支持。

2.2 Selection Api

复制文本这个操作对比复制图片是相对比较简单的，一共包含2大步

一是选中要复制的元素

二是执行复制指令。

执行复制指令在前面的基本语法里已经讲到了，直接调用document.execCommand('copy')就可以了。剩下要做的便是先选中元素了。下面便介绍一下和选中元素相关的selection api

MDN文档上写道:Selection 对象表示用户选择的文本范围或插入符号的当前位置。它代表页面中的文本选区，可能横跨多个元素。文本选区由用户拖拽鼠标经过文字而产生。如果要获取用于检查或修改的 Selection 对象，可以调用 window.getSelection() 方法。

这看起来就十分的官方和抽象，简单的来说Selection 对象所对应的是用户所选择的 ranges （区域），俗称拖蓝。上图中的拖蓝就是selection对象中的一个区域。

通过getRangeAt方法可以获取到具体的选中区域

    let selection = window.getSelection() //获取selection对象
    let range = selection.getRangeAt(0)  //获取第一个选中的区域

除了获取选区中的区域之外，我们还可以通过 document.createRange()创建一个新的区域，然后将该区域添加到选区中

<body>
    <div id="hello">你好</div>
    <div id="yes">是的</div>
</body>
<script>
    let selection = window.getSelection() //获取selection对象
    const hello = document.querySelector('#hello')
    if(selection.rangeCount > 0){
        //如果有已经选中的区域，直接全部去除
        selection.removeAllRanges()
    }
    let range = document.createRange() //创建range
    range.selectNode(hello) //range选中hello
    selection.addRange(range) //加入到选区中
</script>

效果如下，当代码执行后，你好这个元素被直接选中

加入区域的api包括range.selectNode和range.selectNodeContents。其中selectNode表示选中整个节点而selectNodeContents表示选中节点中的内容，针对文字的复制需要选中节点的内容，而图片的复制需要选中节点本身。

用法如下

<body>
    <div id="hello">你好</div>
    <div id="yes">是的</div>
    <button class="btn">点击复制</button>
</body>
<script>
    const yes = document.querySelector('#yes')
    const selection = window.getSelection()
    const range= document.createRange()
    range.selectNode(yes)
    range.selectNode(yes)
</script>

2.3复制文字

通过以上的selection api可以完成创建selection对象-->选中节点内容-->添加到区域-->执行一下copy指令就可以完成复制文字了

<body>
    <div id="hello">你好</div>
    <div id="yes">是的</div>
    <button class="btn">点击复制</button>
</body>

<script>
    const btn = document.querySelector('.btn')
    const hello = document.querySelector('#hello')
    btn.addEventListener('click', () => {
        let range = document.createRange() //创建range
        range.selectNodeContents(hello) //range选中hello
        let selection = window.getSelection() //获取selection对象
        if (selection.rangeCount > 0) {
            //如果有已经选中的区域，直接全部去除
            selection.removeAllRanges()
        }
        selection.addRange(range) //加入到选区中
        if (document.queryCommandSupported && document.queryCommandSupported('copy')) {
            //先检测是否支持document.queryCommandSupported和copy指令
            //如果都支持直接执行指令
            document.execCommand('copy')
            //去除选中区域，取消拖蓝效果
            selection.removeAllRanges()
        }
    })
</script>

2.4复制图像

复制图像的操作是和复制文字基本相同的，只是需要在加入区域时选中整个节点，也就是把selectNodeContents方法换成selectNode

<body>
    <div id="hello">你好</div>
    <div id="yes">是的</div>
    <img src="./test.png" alt="">
    <button class="btn">点击复制</button>
</body>
<script>
    const btn = document.querySelector('.btn')
    const hello = document.querySelector('#hello')
    const img = document.querySelector('img')
    btn.addEventListener('click', () => {
        let range = document.createRange() //创建range
        range.selectNode(img) //range选中图像节点
        let selection = window.getSelection() //获取selection对象
        if (selection.rangeCount > 0) {
            //如果有已经选中的区域，直接全部去除
            selection.removeAllRanges()
        }
        selection.addRange(range) //加入到选区中
        if (document.queryCommandSupported && document.queryCommandSupported('copy')) {
            //先检测是否支持document.queryCommandSupported和copy指令
            //如果都支持直接执行指令
            document.execCommand('copy')
            //去除选中区域，取消拖蓝效果
            selection.removeAllRanges()
        }
    })
</script>

3.clipboard.js

clipboard.js是一个第三方库，也是使用了前文所讲到的document.execCommand('copy')来实现的点击复制，使用方便，但是只能用于文本的复制。

3.1安装和引入clipboard.js

使用npm安装

npm install clipboard --save

安装后在html文件内引入

<script src="dist/clipboard.min.js"></script>

或者使用CDN引入（这里只写了一种CDN引入方式，可以选择多种不同CDN方，具体请看https://github.com/zenorocha/clipboard.js/wiki/CDN-Providers）

<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.11/dist/clipboard.min.js"></script>

使用import的方式引入

import Clipboard from "clipboard";

3.2基本使用

初始化

直接创建一个ClipboardJS对象，传的参数可以是选择器字符串或者是DOM元素或者是DOM元素列表

new ClipboardJS('.btn') // import方式为 new Clipboard('.btn')

实现点击复制文字功能

初始化完后，可以到要绑定的对应元素下添加data-clipboard-target属性，属性值是要复制的元素的选择器，这里要复制的元素是 ‘是的’ 那个div，所以属性值就写#yes。不进行其他配置时，我们点击按钮，触发点击事件后，就可以完成复制文字 ‘是的’ 了。

<body>
    <div id="hello" >你好</div>
    <div id="yes">是的</div>
    <button class="btn" data-clipboard-target="#yes">点击复制</button>
</body>
<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.11/dist/clipboard.min.js"></script>
<script>
    new ClipboardJS('.btn') // import方式为 new Clipboard('.btn')
</script>

点击后，是的这个元素被选中（拖蓝），使用ctrl+v可以完成文字的复制，效果已经达到。

此时有2个问题需要优化

复制的内容必须是页面上的DOM元素，能不能是自己设定的？
拖蓝的效果不是很好看，如何复制文字不显示选中效果？

这时就要用到一个新的属性data-clipboard-text，属性值就是希望动态复制的内容。对ClipboardJS绑定的元素设置这个属性就可以动态复制自己设定的内容，此时就不需要再设置data-clipboard-target属性了（如果同时写2个属性，data-clipboard-text优先）。以下代码是一个写死的简单展示，真实使用的时候属性值要用js设置成需要复制的值。

<body>
    <div id="hello" >你好</div>
    <div id="yes">是的</div>
    <button class="btn" data-clipboard-text="动态设置的内容">点击复制</button>
</body>
<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.11/dist/clipboard.min.js"></script>
<script>
    new ClipboardJS('.btn') // import方式为 new Clipboard('.btn')
</script>

上图显示点击之后，复制内容成功，这样没有选中元素的效果，不会拖蓝，交互效果更好的同时又能动态设置内容

3.3更多用法

data-clipboard-action属性

data-clipboard-action属性可以决定执行的操作，这个属性有2个可选值copy或者是cut，默认是copy也就是复制，前面的所有代码中都没有出现这个属性，是直接使用的默认值copy。cut剪切，只能在input和textarea标签中使用，显然之前的div标签是无法使用的。使用方法仍是对ClipboardJS绑定的元素设置这个属性。

<button class="btn" data-clipboard-text="动态设置的内容" data-clipboard-action="copy">点击复制</button>

事件处理

事件处理可以让用户设置复制或剪切成功或者失败的回调，事件名分别是success和error。可以通过on在ClipboardJS实例对象身上绑定success和error事件处理的回调。以下示例写了最简单alert打印成功和失败

    const clipboard = new ClipboardJS('.btn') // import方式为 new Clipboard('.btn')
    clipboard.on('success',function(){
        alert('复制成功')
    })
    clipboard.on('error',function(){
        alert('复制失败')
    })

纯JS写法

如果不想改HTML，加入过多的属性，可以直接使用纯JS写法来初始化ClipboardJS对象构造函数中传入第二个参数，第二个参数为对象，如下的示例中仅用完成js就完成了动态设置复制内容。设置配置对象的text方法，返回值就是要复制的内容

    new ClipboardJS('.btn',{
        text: function(){
            return '动态复制的内容'
        }
    })

设置配置对象的target方法，返回值就是要复制的元素

    new ClipboardJS('.btn',{
        target: function (){
            return document.querySelector('#hello')
        }
    })

经过测试，当html中设置属性的同时，又在构造函数里加入配置项，以js构造函数配置项为准（优先级高）

<body>
    <div id="hello">你好</div>
    <div id="yes">是的</div>
    <button class="btn" data-clipboard-target="#hello">点击复制</button>
</body>
<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.11/dist/clipboard.min.js"></script>
<script>
    new ClipboardJS('.btn',{
        target(){
            return document.querySelector('#yes')
        }
    })
</script>

销毁对象

如果使用的是单页应用程序，可能希望更精确地管理DOM的生命周期。可以使用destroy方法销毁对象

var clipboard = new ClipboardJS('.btn');
clipboard.destroy();

3.4源码分析

看了之前的api，想了解一下这个所谓的简单的复制库是如何实现的，于是打开了源码开始分析一下

源码地址 https://github.com/zenorocha/clipboard.js

初始化

构造函数里面传2个参数，第一个trigger即触发点击的元素对象，第二个options配置项。从最简单的例子来看，只需要传一个trigger参数就可以实现功能，那就先不管options，直接看与trigger有关的listenClick方法。

listenClick方法调用了一个第三方库的listen方法绑定了click事件和对应的回调函数this.onClick，在onclick方法中，调用了ClipboardActionDefault方法，并且传了对应的几个配置项参数，action container，target，text，这些值都是this.xxx方法,这几个方法又是在哪定义的呢？

找了一下类内部，定义这些方法的地方是在前文构造函数里的this.resolveOptions方法里

resolveOptions方法里的defaultAction，defaultText等等方法都是类似的，都是调用了一个getAttributeValue方法去获取html模板上的属性值

getAttributeValue方法如下，比较简单

ClipboardActionDefault

上面跳了这么多方法虽然不难，但是也有点绕，主要还是在干一件事，那就是通过定义来准备好ClipboardActionDefault这个方法的参数。这时候就要看一下ClipboardActionDefault这个方法在干什么。

简单来看，这个方法主要分4个if判断，前2个if就是一些条件的判断，判断action只能是复制或者剪切，还有就是判断要复制的目标节点的节点类型和readonly问题等等，此处不展开去研究，有兴趣者可以点击本部分开始处的源码链接下载。

后2个if判断中的内容如下，分别用于判断是否有text值和target值，这2个值也是通过本库的核心属性data-clipboard-text和data-clipboard-target在html中获取的（或者在js配置项里获取）。判断完后就调用了ClipboardActionCopy或者ClipboardActionCut方法去实现复制或者剪切功能。

ClipboardActionCopy

这个方法就开始进行文本的复制了，首先判断要复制的目标是普通的字符串（通过data-clipboard-text设置）还是节点（通过data-clipboard-target设置），如果是文本或者不是普通的输入元素，直接调用fakeCopyAction方法执行复制操作。

fakeCopyAction先创建了虚拟元素，然后把这个元素插入dom里，最后执行选中+复制操作

创建虚拟元素的方法也比较简单，先通过原生方法createElement创建了一个textarea元素，然后把它隐藏。创建这种输入类元素的好处就是可以直接去修改它的value，最后一步操作就是把文本text赋值给textarea

创建完虚拟元素就要处理选中问题了，这里调用了select方法，方法内部根据3种元素类型设置了不同的处理对策，select元素只要focus后赋值就好。输入元素可以调用原生的select方法来选中元素，而普通元素就需要使用之前讲到的selection api去获取range和添加range了

function select(element) {
    var selectedText;

    if (element.nodeName === 'SELECT') {
        //针对select元素的处理
        element.focus();

        selectedText = element.value;
    }
    else if (element.nodeName === 'INPUT' || element.nodeName === 'TEXTAREA') {
        //选中输入元素
        var isReadOnly = element.hasAttribute('readonly');

        if (!isReadOnly) {
            element.setAttribute('readonly', '');
        }

        element.select();
        element.setSelectionRange(0, element.value.length);

        if (!isReadOnly) {
            element.removeAttribute('readonly');
        }

        selectedText = element.value;
    }
    else {
        //普通元素选中
        if (element.hasAttribute('contenteditable')) {
            element.focus();
        }

        var selection = window.getSelection();
        var range = document.createRange();

        range.selectNodeContents(element);
        selection.removeAllRanges();
        selection.addRange(range);

        selectedText = selection.toString();
    }

    return selectedText;
}

最后的command（'copy'）也就是对执行复制指令这个方法的简单封装，做了一下兼容性的处理。

4. navigator.clipboard

前面的document.execCommand和第三方库clipboard.js都非常的好用，但是他们可能面临被弃用的风险，那么该怎么解决复制粘贴这个问题呢？ H5新推出的clipboard api是处理复制粘贴相关的api，可以很好的解决这个问题。用promise的方式把数据写入剪贴板，避免了页面的卡顿。

4.1 复制文字

Clipboard对象

使用Clipboard api时我们不需要手动创建Clipboard对象，而是通过navigator.clipboard来获取

打印出Clipboard对象后可以看出，这个对象有4个方法，分为两大类，write和read类。其中与复制相关的是write类表示把数据写入剪贴板，和粘贴相关的是read类表示从剪贴板里面读取数据

writeText方法

Clipboard对象中的writeText方法可以用于复制文字，也是非常简单易用的一个方法。

参数：传一个字符串参数，即要复制的内容

返回值：一个promise对象，如果成功复制则是成功的promise，如果写入剪贴板失败（复制失败）则是失败的promise

示例如下：先创建了一个clipboard对象，然后直接调用writeText方法复制文字123

navigator.clipboard.writeText('123')

根据之前的html结构，使用Clipboard api完成文字的复制

默认情况下，会为当前的激活的页面自动授予剪贴板的写入权限。出于安全方面考虑，这里我们还是先主动向用户请求剪贴板的写入权限，如果被授权，就可以调用上面的方法直接完成复制了。

<body>
    <div id="hello">你好</div>
    <div id="yes">是的</div>
    <img src="./test.png" alt="">
    <button class="btn">点击复制</button>
</body>
<script>
    const btn = document.querySelector('.btn')
    const hello = document.querySelector('#hello')
    const img = document.querySelector('img')
    btn.addEventListener('click', async () => {
        const { state } = await navigator.permissions.query({
            // 出于安全方面考虑，这里我们还是主动向用户请求剪贴板的写入权限
            name: "clipboard-write",
        });
        if (state == 'granted') {
            navigator.clipboard.writeText(hello.innerHTML)
        }
    })
</script>

4.2 复制图像

write方法

write方法除了支持文本数据之外，还支持将图像数据写入到剪贴板，调用该方法后会返回一个 Promise 对象。

以下是简单的使用案例，先通过 Blob API 创建 Blob 对象，然后使用该 Blob 对象来构造 ClipboardItem 对象，最后再通过 write 方法把数据写入到剪贴板，复制了文字（当前页面的地址）

<button onclick="copyPageUrl()">拷贝当前页面地址</button>
<script>
   async function copyPageUrl() {
     const text = new Blob([location.href], {type: 'text/plain'});
     try {
       await navigator.clipboard.write(
         new ClipboardItem({
           "text/plain": text,
         }),
       );
       console.log("页面地址已经被拷贝到剪贴板中");
     } catch (err) {
       console.error("页面地址拷贝失败: ", err);
     }
  }
</script>

复制图片案例

了解了write的基本用法，那使用Clipboard对象复制图片也有办法了，只要先把图像变成Blob对象，然后构造 ClipboardItem 对象，最后再调用write方法就好。

可是，如何把一个img标签里的图片转换成Blob对象呢？

首先从Blob对象的构造函数开始，MDN文档写了Blob构造函数所需要的参数

var aBlob = new Blob( array, options );

array 是一个由ArrayBuffer, ArrayBufferView, Blob, DOMString 等对象构成的 Array ，或者其他类似对象的混合体，它将会被放进 Blob。DOMStrings 会被编码为 UTF-8。
options 是一个可选的BlobPropertyBag字典，它可能会指定如下两个属性：

type，默认值为 ""，它代表了将会被放入到 blob 中的数组内容的 MIME 类型。
endings，默认值为"transparent"，用于指定包含行结束符\n的字符串如何被写入。它是以下两个值中的一个："native"，代表行结束符会被更改为适合宿主操作系统文件系统的换行符，或者 "transparent"，代表会保持 blob 中保存的结束符不变

根据文档中显示，我们需要先准备一个对应的数组，然后才能构造Blob对象，也就是要把图片转成二进制数据。

分步骤实现把图片转换成Blob

把img图像画在canvas画布上
调用canvas的toDataURL方法，获取图片的base64编码
调用atob方法，把base64编码的数据转换成二进制数据
根据转换后的二进制数据，创建一个视图，此视图将把缓冲内的数据格式化为一个 8 位无符号整数数组，也就是获得了一个ArrayBufferView数组（关于ArrayBuffer和ArrayBufferView的内容详细可查阅 JavaScript 类型化数组）

下方代码完成了基本的功能实现：

微信输入框显示，可以完成复制

这个方法在浏览器兼容性上仍存在一些问题，比如火狐可能就不支持ClipboardItem对象，此时只能用前文写的document.execCommand方法了。

<body>
    <div id="hello">你好</div>
    <div id="yes">是的</div>
    <img style="width: 400px; height: 200px" src="./test.png" alt="">
    <button class="btn">点击复制</button>
</body>
<script>
    const btn = document.querySelector('.btn')
    const hello = document.querySelector('#hello')
    const img = document.querySelector('img')
    btn.addEventListener('click', async () => {
        const {
            state
        } = await navigator.permissions.query({
            // 出于安全方面考虑，这里我们还是主动向用户请求剪贴板的写入权限
            name: "clipboard-write",
        });
        if (state == 'granted') {
            //创建canvas对象
            const canvas = document.createElement('canvas');
            const context = canvas.getContext('2d');
            const image = new Image()
            image.src = img.src
            image.onload = async () => {
                canvas.width = image.width;
                canvas.height = image.height;
                context.drawImage(image, 0, 0, image.width, image.height); // img图片转成canvas
                const imageDataUrl = canvas.toDataURL() //通过canvas获取base64编码
                const binary = atob(imageDataUrl.split(',')[1]); // base64编码转二进制数据
                const array = [];
                for (let i = 0; i < binary.length; i++) {
                    array.push(binary.charCodeAt(i));
                }
                //二进制数据转Blob对象
                const blob = new Blob([new Uint8Array(array)], {
                    type: 'image/png'
                });
                // 判断浏览器是否有ClipboardItem对象，有些浏览器不支持本方法
                if (typeof ClipboardItem !== 'undefined') {
                    //把blob数据写入剪贴板
                    await navigator.clipboard.write([
                        new ClipboardItem({
                            [blob.type]: blob
                        })
                    ])
                }
            }
        }
    })
</script>

热门相关：总裁的秘密爱人后福拒嫁豪门，前妻太抢手大妆拒嫁豪门，前妻太抢手