js实现各种复制到剪贴板的方法(分享)

2023年6月11日上午6:55 • JavaScript

下面是js实现各种复制到剪贴板的方法的攻略：

一、前置知识

为了实现复制到剪贴板的功能，必须要掌握以下前置知识：

Clipboard API：一种新的Web API，提供了操作剪贴板的标准接口，并且被主流浏览器所支持。
execCommand()方法：一种旧的Web API，已经被废弃，但是在Clipboard API出现之前是实现复制到剪贴板的常用方法。

在本攻略中，我们将通过这两种方法来实现各种复制到剪贴板的功能。

二、使用Clipboard API复制到剪贴板

Clipboard API提供了Clipboard类，可以通过该类的实例来操作剪贴板。下面是复制文本内容到剪贴板的示例代码：

<!-- HTML代码 -->
<button id="btn">复制到剪贴板</button>

// JavaScript代码
const btn = document.getElementById('btn');
btn.addEventListener('click', () => {
  const content = '要复制的内容';
  navigator.clipboard.writeText(content).then(() => {
    alert('内容已经复制到剪贴板');
  }).catch((err) => {
    console.error('复制失败', err);
  });
});

上面的代码中，我们首先获取了一个按钮元素，并为其添加了一个点击事件监听器。当点击按钮时，我们调用了navigator.clipboard.writeText()方法，该方法可以将一个字符串文本内容写入剪贴板，并返回一个Promise对象。如果文本写入成功，我们就可以弹出一个提示框，告诉用户复制成功；否则，我们就在控制台中输出错误信息。

除了复制文本内容，Clipboard API还提供了复制二进制数据和URL的方法，具体的使用方法可以参考相关文档。

三、使用execCommand()方法复制到剪贴板

上面的代码中使用的是Clipboard API，如果浏览器不支持该API，我们就需要使用旧的execCommand()方法。下面是复制文本内容到剪贴板的示例代码：

<!-- HTML代码 -->
<button id="btn">复制到剪贴板</button>

// JavaScript代码
const btn = document.getElementById('btn');
btn.addEventListener('click', () => {
  const content = '要复制的内容';
  const input = document.createElement('input');
  input.value = content;
  document.body.appendChild(input);
  input.select();
  document.execCommand('copy');
  document.body.removeChild(input);
  alert('内容已经复制到剪贴板');
});

上面的代码中，我们首先创建了一个input元素，并给它设置了value属性，即待复制的文本内容。然后将该input元素添加到了文档中，并选中该元素的文本内容。接着，我们调用了document.execCommand()方法，并将其命令设置为'copy'，即将选中的内容复制到剪贴板中。最后，我们需要将该input元素从文档中删除，并弹出一个提示框，告诉用户复制成功。

除了复制文本内容之外，execCommand()方法还可以用来复制HTML内容、图片、表格等。具体的使用方法可以参考相关文档。