JavaScript实现点击复制（JS访问剪贴板相关）

一、具体代码

​ 网页前端开发中有时会出现这样的场景：让用户点击某个按钮，然后就能直接复制对应的文本内容，让用户可以将文本内容粘贴到想要粘贴的地方，常用于分享功能模块中。如果想要实现这种效果就需要我们去访问用户的剪贴板，然后把想要复制的内容写入其中即可，本文主要讲解两种解决方案：document.execCommand()和Clipboard。

先上代码：

​ 为了同时兼容新旧浏览器（IE！），我们一般采取下面的方式：

 // 复制文本内容
  function copyContent (content) {
    
    
    // 复制结果
    let copyResult = true
    // 设置想要复制的文本内容
    const text = content || '让我们一起快乐的敲代码吧~';
    // 判断是否支持clipboard方式
    if (!window.navigator.clipboard) {
    
    
      // 利用clipboard将文本写入剪贴板（这是一个异步promise）
      window.navigator.clipboard.writeText(text).then((res) => {
    
    
        console.log('复制成功');
        // 返回复制操作的最终结果
        return copyResult;
      }).catch((err) => {
    
    
        copyResult = false
        console.log('复制失败', err);
        // 返回复制操作的最终结果
        return copyResult;
      })
    } else {
    
    
      // 不支持clipboard方式 则采用document.execCommand()方式
      // 创建一个input元素
      let inputDom = document.createElement('textarea');
      // 设置为只读 防止移动端手机上弹出软键盘  
      inputDom.setAttribute('readonly', 'readonly');
      // 给input元素赋值
      inputDom.value = text;
      // 将创建的input添加到body
      document.body.appendChild(inputDom);
      // 选中input元素的内容
      inputDom.select();
      // 执行浏览器复制命令
      // 复制命令会将当前选中的内容复制到剪切板中（这里就是创建的input标签中的内容）
      // Input要在正常的编辑状态下原生复制方法才会生效
      const result = document.execCommand('copy')
      // 判断是否复制成功
      if (result) {
    
    
        console.log('复制成功');
      } else {
    
    
        console.log('复制失败');
        copyResult = false
      }
      // 复制操作后再将构造的标签 移除
      document.body.removeChild(inputDom);
      // 返回复制操作的最终结果
      return copyResult;
    }
  }

二、剪贴板

​ 剪贴板是用于短期数据存储或者转移的数据缓存区，数据转移可以发生在不同的文档或应用程序之间。剪贴板常常实现为一个匿名的、临时的数据缓存，有时也叫做粘贴缓存，可由绝大部分位于已定义应用程序接口的环境中的程序访问。

三、Clipboard

1、简介

​ Clipboard API 提供了响应剪贴板命令和异步读写系统剪贴板的能力，该API是用来取代document.execCommand()这种剪贴板访问方式的。但是该API需要通过PerMissions API获取用户授予的权限（"clipboard-read" 或 "clipboard-write"）之后，才能访问剪贴板，如果用户拒绝授予相应权限，则无法访问剪贴板，调用Clipboard 对象的方法就会失败。而且该API仅在一些安全上下文环境中可用（HTTPS、localhost、127.0.0.1等），我们可以通过window.isSecureContext的返回值来判断当前环境是否为安全上下文环境。

​ 我们可以通过window.navigator.permissions.query({name: "clipboard-read"}) 和window.navigator.permissions.query({name: "clipboard-write"}) 来判断当前网页是否拥有读写剪贴板的权限（Firefox不支持！）。

​ 该API在 Window.navigator 接口上添加了只读属性 clipboard，该属性返回一个可以读写剪切板内容的 Clipboard 对象，我们前端大多是通过window.navigator.clipboard来访问剪贴板。

​ 由于该API是一个较新的API，而且涉及的安全问题和技术复杂性太多，所以浏览器兼容性相对差一点（不支持IE）：

浏览器兼容性（Navigator.clipboard）：

2、Clipboard

​ 该接口实现了Clipboard API，用于读写系统剪贴板上的文本和数据的接口，前端规范称其为异步剪贴板API（Async Clipboard API），因为该API下的所有方法都是异步的，它们会返回一个Promise对象，操作成功后调用resolve()，操作失败后调用reject()。

相关方法：

① read()

​ 该方法用于从系统剪贴板中读取任意数据的副本（文本、图片等），返回一个Promise对象，在经过异步数据检索之后，Promise返回一个包含相关数据的ClipboardItem对象的数组，该数组含有两个数据对象，第一个对象中仅包含剪贴板中的文本数据，第二个对象中包含剪贴板中的所有内容数据。

​ 该方法必须在网页获取焦点时，才能正常调用，否则会报错。而且该方法不能在JS中直接调用，只能在处理用户行为（点击等交互行为）时才能正常调用，否则会报错。

​ 如果系统剪贴板中的内容是复制的系统本地的文件，则通过该方法只能访问到文件名，而无法访问到文件本身的内容。如果我们是复制的系统本地文件中的内容，并包含文本和图片，则该方法能正常获取到文本信息，但图片无法被获取到。

② readText()

​ 该方法从系统剪贴板读取中文本数据的副本，返回一个Promise对象，在经过异步数据检索之后，Promise返回一个包含相关文本数据的String字符串数据。

​ 该方法必须在网页获取焦点时，才能正常调用，否则会报错。但是与read()不同的是，该方法可以在JS中直接调用，不需要等待用户行为。

​ 如果系统剪贴板中的内容是复制的系统本地的文件，则通过该方法可以访问到文件名。如果我们是复制的系统本地文件中的内容，并包含文本和图片，则该方法只能获取到其中文本信息。

案例代码：

  <button onclick="clickRead()">点击访问剪贴板</button>
  <p>我想调用Clipboard API来读取剪贴板信息</p>
  <p>我想2342342342432</p>
  <img src="./image/img.png" alt="">
  <div>23423423422</div>


  <script>
    // 在刚进入页面时，先尝试获取剪贴板的内容
    window.navigator.clipboard.read().then((res) => {
      
      
      console.log('read--res-----', res);
    }).catch((err) => {
      
      
      console.log('read--err-----', err);
    })
    // 在刚进入页面时，先尝试获取剪贴板的文本内容
    window.navigator.clipboard.readText().then((res) => {
      
      
      console.log('readText--res-----', res);
    }).catch((err) => {
      
      
      console.log('readText--err-----', err);
    })
    // 用户点击按钮事件
    function clickRead () {
      
      
      // 再次尝试获取剪贴板的内容 promise异步操作
      window.navigator.clipboard.read().then((res) => {
      
      
        console.log('用户点击-read--res-----', res);
        res[0].types.forEach((type, index) => {
      
      
          // 通过getType读取剪贴板中对应的数据内容 并返回相应blob对象
          res[0].getType(type).then(res => {
      
      
            console.log('blob--', res);
            let reader = new FileReader();
            // 为了方便查看  将bolb转为base64 （异步操作）
            reader.readAsDataURL(res);
            // 转换成功
            reader.onload = () => {
      
      
              if (index === 0) {
      
      
                console.log('用户剪贴板中的所有文本内容转换成的base64--', reader.result);
              } else
                if (index === 1) {
      
      
                  console.log('用户剪贴板中的所有数据内容内容转换成的base64--', reader.result);
                }
            };
          });
        })
      }).catch((err) => {
      
      
        // 读取失败的情况
        console.log('用户点击-read--err-----', err);
      })
      // 在用户点击事件中 再次尝试获取剪贴板的文本内容
      window.navigator.clipboard.readText().then((res) => {
      
      
        // 读取成功的情况
        console.log('用户点击-readText--res-----', res);
      }).catch((err) => {
      
      
        // 读取失败的情况
        console.log('用户点击-readText--err-----', err);
      })
    }
  </script>

页面未获取剪贴板访问权限时：

有权限但页面未获取焦点时：

有权限且页面获取焦点时：

有权限且页面获取焦点，并触发用户行为：

文本内容base64查看：

所有内容base64查看：

③ write()

​ 该方法用于写入任意数据至系统剪贴板，参数为一个ClipboardItem对象数组（但每次只能包含一个ClipboardItem对象），里面包含了要写入剪贴板的数据，返回值为一个Promise对象，经过异步操作之后，返回执行结果。

​ 目前主流浏览器都支持写入的 MIME 数据类型有：text/plain、text/html、image/png、text/uri-list。

④ writeText()

​ 该方法用于写入文本数据至系统剪贴板，参数为一个String字符串，表示要写入剪贴板的文本数据，返回值为一个Promise对象，经过异步操作之后，返回执行结果。

案例代码：

  <!-- 点击选择文件写入到剪贴板 -->
  <input type="file" onchange="clickWrite(event)">

<script>
    // 在刚进入页面时，先尝试向剪贴板写入内容
    // 定义数据类型
    const type = "text/plain";
    // 创建一个blob对象
    const blob = new Blob(['我是要通过write()写入剪贴板的内容1111'], {
      
       type });
    // 创建一个ClipboardItem对象数组
    const data = [new ClipboardItem({
      
       [type]: blob })];
    console.log('data--', data);
    // 将数据写入剪贴板
    window.navigator.clipboard.write(data).then((res) => {
      
      
      console.log('write--res-----', res);
      // 输出剪贴板中的内容
      window.navigator.clipboard.readText().then((res) => {
      
      
        console.log('readText--res-----', res);
      }).catch((err) => {
      
      
        console.log('readText--err-----', err);
      })
    }).catch((err) => {
      
      
      console.log('write--err-----', err);
    })


    // 因为读写都是异步操作 为了避免两个写操作互相干扰 所以等待1秒后 再尝试向剪贴板写入文本内容
    setTimeout(() => {
      
      
      window.navigator.clipboard.writeText('我是要通过writeText()写入剪贴板的文本内容2222').then((res) => {
      
      
        console.log('writeText--res-----', res);
        // 输出剪贴板中的内容
        window.navigator.clipboard.readText().then((res) => {
      
      
          console.log('readText--res-----', res);
        }).catch((err) => {
      
      
          console.log('readText--err-----', err);
        })
      }).catch((err) => {
      
      
        console.log('writeText--err-----', err);
      })
    }, 1000)

    // 用户选择图片写入剪贴板事件
    function clickWrite (e) {
      
      
      console.log('file--', e.target.files[0]);
      // 定义数据类型
      const type = "image/png";
      // 创建一个ClipboardItem对象数组
      const data = [new ClipboardItem({
      
       [type]: e.target.files[0] })];
      console.log('data--', data);
      // 将数据写入剪贴板
      window.navigator.clipboard.write(data).then((res) => {
      
      
        console.log('write--res-----', res);
        // 输出剪贴板中的内容
        window.navigator.clipboard.read().then((res) => {
      
      
          console.log('read--res-----', res);
        }).catch((err) => {
      
      
          console.log('read--err-----', err);
        })
      }).catch((err) => {
      
      
        console.log('write--err-----', err);
      })
    }
  </script>

执行结果：

3、ClipboardEvent

​ 该接口继承了Event接口，提供了有关系统剪贴板信息修改的事件，即cut、copy、paste事件，前端规范称其为剪贴板事件（Clipboard Event API）。

​ 我们可以通过ClipboardEvent(type[, options])构造函数来创建ClipboardEvent对象，第一个参数type，是一个字符串，表示当前事件类型的名字，可以为：cut、copy、paste，大小写敏感；第二个参数options是可选的，内包含一个clipboardData属性，该属性的值是一个DataTransfer对象，包含了剪贴板事件所涉及的数据。

var clipboardEvent = new ClipboardEvent(type[, options]);
// 实例
var clipboardEvent = new ClipboardEvent('paste', {
    
    
    clipboardData: new DataTransfer()
});

​ ClipboardEvent.clipboardData 属性保存了一个 DataTransfer 对象，该对象有两个用途：① 用于指定通过cut和copy事件写入到剪贴板中的数据，通常使用setData(format,data)来指定数据。② 用于从paste事件中获取想要从剪贴板中读取的数据，通常使用getData(fomat)来获取。fomat表示数据类型，例如：text/plain、text/uri-list。

案例代码：

var clipboardEvent = new ClipboardEvent('paste', {
    
    
      clipboardData: new DataTransfer()
});
console.log('clipboardEvent--', clipboardEvent.clipboardData.getData('text/plain'));
clipboardEvent.clipboardData.setData('text/plain', 'Clipboard API来读取剪贴板信息');
console.log('clipboardEvent--', clipboardEvent.clipboardData.getData('text/plain'));

执行结果：

4、ClipboardItem

​ 该接口表示在使用read()和write()读写剪贴板数据时，单个数据的数据格式，该数据格式中将 MIME 类型作为key，将数据作为value。

① 创建ClipboardItem对象

​ 可通过构造函数ClipboardItem(data[, options])来创建该对象，第一个参数为想要存储的数据，可以为Blob、String或Promise（但个人开发发现file对象也可以）；第二个对象参数表示数据的呈现形式，该对象只包含presentationStyle属性，属性值有三种：unspecified、inline和attachment. 默认值为unspecified，但是该属性支持性特别差：Chrome、Edge、Firefox、Opera都不支持该属性，Safari支持该属性，所以该属性了解即可。

​ 我们也可以通过ClipboardItem.presentationStyle来获取当前对象的数据呈现形式。

new ClipboardItem(data[, options])
// 实例
const test = new ClipboardItem({
    
     ["text/plain"]: new Blob(['我是小朱同学'], {
    
     "text/plain" }) }

② 读取ClipboardItem对象中的数据

​ 首先我们可以通过ClipboardItem.types获取当前ClipboardItem对象中所有MIME 类型组成的数组，然后再通过getType(type)方法来异步读取对应的数据，返回一个Promise，读取的数据为Blob类型：

ClipboardItem.types.forEach(type => {
    
    
 		ClipboardItem.getType(type).then(res => {
    
    
            console.log('blob--', res);
    })
})

二、document.execCommand()

1、简介

​ 该方法用来操作当前聚焦的可编辑元素（input、textarea）中的内容，例如复制、剪贴、粘贴、删除、文本加粗、插入图片等等效果，有些富文本编辑器组件就是基于该API进行开发。而且该API的兼容性很好，可以兼容到IE6及以上。该API已经不推荐使用了，因为现在该API已经被Clipboard全面替代，虽然目前多数主流浏览器还支持使用，但随时有可能被完全弃用。

浏览器兼容性：

2、基本语法

cosnt result = document.execCommand(aCommandName[,aShowDefaultUI,aValueArgument])

参数：

​ ① aCommandName：一个命令字符串，表示要执行操作的名称，常用的有：copy、cut、paste、bold等等，具体可查询：execCommand。

​ ② aShowDefaultUI ：一个布尔值，表示是否展示用户界面，一般为false（Firefox不支持）。

​ ③ aValueArgument：第一个参数中的某些命令需要的额外参数，默认为null，例如：insertImage 需要提供插入 image 的 url。

返回值：

​ ① 一个Boolean：表示要执行操作是否执行成功（true），若为false，则表示操作不被支持或操作失败。

3、基本使用

function copyInputContent () {
    
    
    // 设置想要复制的文本内容
    const text = '让我们一起快乐的敲代码吧~';
    // 创建一个input元素
    let inputDom = document.createElement('textarea');
    // 设置为只读 防止移动端手机上弹出软键盘  
    inputDom.setAttribute('readonly', 'readonly');
    // 给input元素赋值
    inputDom.value = text;
    // 将创建的input添加到body
    document.body.appendChild(inputDom);
    // 选中input元素的内容
    inputDom.select();
    // 执行浏览器复制命令
    // 复制命令会将当前选中的内容复制到剪切板中（这里就是创建的input标签中的内容）
    // Input要在正常的编辑状态下原生复制方法才会生效
    const result = document.execCommand('copy')
    // 复制操作后再将构造的标签 移除
    document.body.removeChild(inputDom);
  }

三、参考文档

Clipboard

navigator.permissions.query()

MIME

ClipboardItem

ClipboardEvent

document.execCommand

PerMissions