面试官：如何使用Javascript实现复制粘贴功能？

背景

本篇文章记录如何通过js代码实现复制内容到剪切板，之后可以粘贴到需要的地方的功能。

分为两个部分内容：

前两个部分使用execCommand方法，该方法现在被弃用(ps：虽然也还可以用就行了), 且对于单行内容的复制需要结合input标签实现，多行内容的复制需要结合textarea标签实现。

第三个部分，则是现在使用Clipboard API来实现单行或多行内容的复制。(推荐方法)

1、execCommand方法

该方法是在document对象下的方法，现已被弃用，但在这里考虑到以前已经使用过这样的方法实现复制功能了，也写在这里，现在仍然可用。

单行复制

通过input标签将需要复制的内容传递给value属性，之后通过document对象下execCommand方法执行复制功能即可。

具体实现如下：

handleCopy() {
  let copy_text = '需要复制的内容';//拿到想要复制的值
  
  let input_dom = document.createElement('input');//创建input元素
  input_dom.value = copy_text;//添加需要复制的内容到value属性
  document.body.appendChild(input_dom);//向页面底部追加输入框
  input_dom.select();//选择input元素
  document.execCommand("Copy");//执行复制命令
  alert("复制成功！");//弹出提示信息，不同组件可能存在写法不同
  
  //复制之后再删除元素，否则无法成功赋值
  input_dom.remove();//删除动态创建的节点
},

上面的方法在页面需要触发复制功能的时候添加到对应鼠标事件即可。

多行复制

通过textarea标签将需要复制的内容传递给value属性，并在需要换行的内容后面加入换行符\r\n，之后通过document对象下execCommand方法执行复制功能即可。

具体实现如下：

handleCopy() {
  let copy_text = '第一行需要复制的内容\r\n第二行需要复制的内容';//拿到想要复制的值
  
  let textarea_dom = document.createElement('textarea');//创建textarea元素
  document.body.appendChild(textarea_dom);//向页面底部追加输入框
  textarea_dom.value = copy_text; //添加需要复制的内容到value属性
  textarea_dom.select();//选择input元素
  document.execCommand("Copy");//执行复制命令
  alert("复制成功！");//弹出提示信息，不同组件可能存在写法不同
  
  //复制之后再删除元素，否则无法成功赋值
  document.body.removeChild(textarea_dom); //删除动态创建的节点
}

上面的方法在页面需要触发复制功能的时候添加到对应鼠标事件即可。

2、Clipboard API（推荐）

Clipboard API中的 navigator.clipboard.writeText 方法可以更加简单的实现单行和多行的内容复制，而且该方法会返回一个Promise对象，可以帮助我们简单处理复制成功或复制失败后需要执行的内容。

具体实现如下：

handleCopy() {
  let copy_text = '第一行需要复制的内容\r\n第二行需要复制的内容';//拿到想要复制的值
  
  // 使用Clipboard API复制文本到剪贴板中
  navigator.clipboard.writeText(copy_text).then(() => {
    alert("复制成功！")
  }).catch((err)=>{
    alert("复制失败！")
  })
}

上面的方法在页面需要触发复制功能的时候添加到对应鼠标事件即可，且在复制内容中，直接支持换行符的实现。

注意：

上面的navigator.clipboard.writeText方法只有在游览器的navigator对象下才会存在clipboard对象；如果你是在vue，react等前端框架中像上面的方法调用clipboard对象，是不存在的。

因为在这类前端框架中编写js的环境下的navigator对象并没有提供clipboard对象，而且clipboard对象并不是navigator对象的标准属性或方法。

因此，在这类框架中需要使用Clipboard API需要通过第三方依赖的方法去实现。

下面以常见的vue框架中使用Clipboard API为例：

1、首先按照第三方Clipboard依赖

npm install clipboard --save

2、在页面文件中引入或在main.js全局引入

import Clipboard from 'clipboard'

3、在需要实现复制功能的方法中，写入实现

<template>
	<div>
    <div class="copy_dom" @click="handleCopy"></div>
  </div>
</template>

<script>
import Clipboard from 'clipboard';
export default {
  data: {
    clipboard: null
  }
  methods: {
  	handleCopy() {
      // 传递事件绑定的元素class名和需要复制的内容text，创建Clipboard实例 
	  this.clipboard = new Clipboard('.copy_dom', {
        text: () => {
          return '第一行需要复制的内容\r\n第二行需要复制的内容'
        }
      });
      // 复制成功后的回调函数
      this.clipboard.on('success', () => {
        // 释放内存，非常重要，不然会重复触发回调函数
		this.clipboard.destroy();
        console.log('复制成功！');
      })
     	// 复制失败后的回调函数
      this.clipboard.on('error', function(e) {
        console.log('复制失败！');
      })
		}
  },
  //beforeDestroy() {
  //  this.clipboard.destroy(); //组件页面销毁时，需要手动清理clipboard，释放内存
  //}
}
</script>

上面的代码中，clipboard实例在复制成功后，建议在success的回调函数中执行实例销毁的destroy方法；也可以在页面组件关闭后的beforeDestroy生命周期执行销毁方法。