浏览器原生剪贴板 navigator.clipboard与document.execCommand 及 vue-clipboards使用

前言

前端有时会有这样的需求：点击复制就可以复制对应的文案，这也是方便用户操作实现复制的目的，这里就整理一下实现该功能的使用方法及注意事项~~~

document.execCommand

相比用过这个 API 的多半是写原生 Aditor 编辑器的吧，他算是最早提供该支持的API了，API 里面有很多方法，如很常见的 加粗/斜体/字号/字体颜色/插入图片/插入链接/复制、剪切、撤销等等… 具体可以看 MDN

而我们这里就来用用这个「复制」功能，废话不多说先上代码：

function copy(text = ''){
	let input = document.createElement('input')
	input.style.position = 'fixed'
	input.style.top = '-10000px'
	input.style.zIndex = '-999'
	document.body.appendChild(input)
	input.value = text
	input.focus()
	input.select()
	try {
	  let result = document.execCommand('copy')
	  document.body.removeChild(input)
	  if (!result || result === 'unsuccessful') {
	    console.log('复制失败')
	  } else {
	    console.log('复制成功')
	  }
	} catch (e) {
	  document.body.removeChild(input)
	  alert('当前浏览器不支持复制功能，请检查更新或更换其他浏览器操作')
	}
}

解码

在大多数浏览器中，可以使用 document.execCommand('copy') 触发浏览器自己的复制。如果要复制的文本是不存在于 DOM 中的字符串，我们必须将其插入到 DOM input标签 因此为了不影响现有的布局我们就让其脱离文档流并且定位到看不见的位置，这样用户就察觉不到啦~

【注意不能将input设置为 display：none; 这样相当于销毁了该DOM，因此是实现不了复制的功能】

然后使用 try...catch 语法不兼容出现报错的问题，因为该复制方法 document.execCommand('copy') 不是所有浏览器兼容的，如果报错了就会影响后面的逻辑执行，我们看看兼容范围+++

最后就是获取是否成功，也就是调用该方法的返回值 【一个 Boolean ，如果是 false 则表示操作不被支持或未被启用。】，对于复制的方法看其他的文档有提及到成功会返回 successful，失败就返回 unsuccessful，因此判断的时候按上面这样就行了，还有注意要及时去掉插入文档的 input。

navigator.clipboard

疑问

Q：想必大家会有疑问，为啥浏览器又推出 navigator.clipboard来完成复制操作 ，document.execCommand('copy')不香吗？

A：原因：
其一是MDN上已经提示该方法有可能在未来废弃掉;
其二 document.execCommand操作剪贴板的操作是同步的，并且只能读取和写入 DOM，相反另一个支持异步操作;
其三就是安全问题，想必各位小伙伴或多或少会做过这样的操作，复制一下自己的个人信息然后粘贴到其他地方，看是所谓的方便如果遇到恶意有毒的钓鱼网站，那存在剪切板的信息就会一览无余，网络信息安全一直都是重中之重，所以在这方面上 navigator.clipboard 算是做足了防备，我们后面详细介绍~
·
虽然兼容性来看势必支持率好于navigator.clipboard，但是还是难逃宿命呀

·

看看异步的 navigator.clipboard 异步如何写吧：

1.复制：将文本写入剪贴板 writeText() 可以把文本写入剪切板。writeText() 是异步的，它返回一个 Promise：

navigator.clipboard.writeText('要复制的文本')
  .then(() => {
    console.log('文本已经成功复制到剪切板');
  })
  .catch(err => {
    // 如果用户没有授权，则抛出异常
    console.error('无法复制此文本：', err);
  });

还可以使用异步函数 的 async 和 await ：

async function copyPageUrl() {
  try {
    await navigator.clipboard.writeText(location.href);
    console.log('Page URL copied to clipboard');
  } catch (err) {
    console.error('Failed to copy: ', err);
  }
}

2.粘贴：从剪贴板中读取文本和复制一样，可以通过调用 readText() 从剪贴板中读取文本，该函数也返回一个 Promise：

navigator.clipboard.readText()
  .then(text => {
    console.log('Pasted content: ', text);
  })
  .catch(err => {
    console.error('Failed to read clipboard contents: ', err);
  });

为了保持一致性，下面是等效的异步函数：

async function getClipboardContents() {
  try {
    const text = await navigator.clipboard.readText();
    console.log('Pasted content: ', text);
  } catch (err) {
    console.error('Failed to read clipboard contents: ', err);
  }
}

3.处理粘贴事件 paste – 兼容写法

document.addEventListener('paste', async e => {
  let text;
  if (navigator.clipboard) {
    text = await navigator.clipboard.readText()
  }
  else {
    text = e.clipboardData.getData('text/plain');
  }
  console.log('Got pasted text: ', text);
});

安全和权限

剪贴板访问一直为浏览器带来安全问题。如果没有适当的权限，页面可能会悄悄地将所有恶意内容复制到用户的剪贴板，粘贴时会产生灾难性的结果。想象一下，一个网页，静静地复制 rm -rf / 或解压缩炸弹图像到剪贴板。

让网页不受限制地读取剪贴板更加麻烦。用户经常将敏感信息（如密码和个人详细信息）复制到剪贴板，然后可以通过任何页面阅读，而用户根本无法察觉。

与许多新的 API 一样，navigator.clipboard 仅支持通过 HTTPS 提供的页面。为了防止滥用，只有当页面处于活动选项卡时才允许剪贴板访问。活动选项卡中的页面可以在不请求权限的情况下写入剪贴板，但从剪贴板中读取始终需要权限。

为了更容易，复制和粘贴的两个新权限已添加到 Permissions API 中。当页面处于活动选项卡时，clipboard-write 权限会自动授予页面。当您通过从剪贴板中读取数据时，则必须要求获取 clipboard-read 权限。

{ name: 'clipboard-read' }
{ name: 'clipboard-write' }

与使用权限 API 的任何其它内容一样，可以检查您的应用是否具有与剪贴板交互的权限：

navigator.permissions.query({
  name: 'clipboard-read'
}).then(permissionStatus => {
  // permissionStatus.state 的值是 'granted'、'denied'、'prompt':
  console.log(permissionStatus.state);

  // 监听权限状态改变事件
  permissionStatus.onchange = () => {
    console.log(permissionStatus.state);
  };
});

以下是剪贴板 API 的“异步”部分真正派上用场的地方：尝试读取或写入剪贴板数据将自动提示用户获得权限（如果尚未授予）。由于 API 是基于 Promise 的，所以如果用户拒绝剪贴板权限时，Promise 将被 reject，因此页面可以适当地作出响应。

结语

从上面可知调用 navigator.clipboard 的 API 必须是 https安全协议 访问，否则浏览器将不会暴露出该API调用时会报错失败，其次如果想访问剪切板的内容的话，需要两个条件：第一必须是活动界面也就是说如果你切换到其他界面时，在访问原本界面的剪切板信息将不会执行；第二必须用户开启访问剪切板权限，否则不给访问。结合这些用户操作的安全性也得到了大大地提升~

结合navigator.clipboard与document.execCommand做个兼容

因为 navigator.clipboard 的兼容性及使用约束性，我们对复制操作做个兼容，我这边是抽出一个方法对外导出，需要用的话就导入对应函数，用到 es6 的 Promise 语法，毕竟如果复制成功可能还需要做什么操作就各自的逻辑

/**
 * 复制文本
 * @param {String} text
 */
export function copyText(text = '') {
  try {
    return navigator.clipboard
      .writeText(text)
      .then(() => {
        return Promise.resolve()
      })
      .catch(err => {
        console.error('复制失败：', err)
        return Promise.reject(err)
      })
  } catch (e) {
    // console.log('navigator.clipboard', e)
    let input = document.createElement('input')
    input.style.position = 'fixed'
    input.style.top = '-10000px'
    input.style.zIndex = '-999'
    document.body.appendChild(input)
    console.log('input', input)
    input.value = text
    input.focus()
    input.select()
    try {
      let result = document.execCommand('copy')
      document.body.removeChild(input)
      if (!result || result === 'unsuccessful') {
        return Promise.reject('复制失败')
      } else {
        return Promise.resolve()
      }
    } catch (e) {
      document.body.removeChild(input)
      return Promise.reject(
        '当前浏览器不支持复制功能，请检查更新或更换其他浏览器操作'
      )
    }
  }
}

调用例子：

import { copyText } from '@/utils'

handleCopy(text) {
   copyText(text)
     .then(() => {
       this.$message.success('协议地址复制成功！')
       // do something...
     })
     .catch(e => {
       this.$message.error(e)
     })
 }

Vue中的vue-clipboards

如果项目用的是 Vue 开发的话，也可以使用 vue-clipboards 完成复制等操作，我们看看如何使用：

首先安装一下 vue-clipboards 到项目里

npm install vue-clipboards --save

然后在需要的页面的 main.js 中引入使用：

import VueClipboards from 'vue-clipboards';
Vue.use(VueClipboards);

页面中使用，v-clipboard中直接传入需要复制的内容即可：

<button v-clipboard="copyText" @success="handleSuccess" @error="handleError">Copy</button>

data() {
 return {
      copyText: '复制的文本
     }
 },
 methods: {
     handleSuccess(e) {
         console.log(e);
     },
     handleError(e) {
         console.log(e);
     },
 }

当然还有 clipboard.js也是可以用于复制的，具体可以参考这篇文章：
在vue使用clipboard.js进行一键复制文本

关于复制操作，基本就讲到这里了，需要可以帮到大家，文中如有错误可以指出~

---

参阅文章

• MDN - Document.execCommand()
• MDN - Clipboard
• NPM - vue-clipboards
• Chrome 66 新增异步剪贴板API
• 在vue使用clipboard.js进行一键复制文本