npm 反应复制到剪贴板 - Javascript

当我们需要将某个文本或对象复制到剪贴板中时，通常需要手动进行选择和复制操作。但是，如果我们需要将一些信息在多个地方进行粘贴，手动操作就会变得非常繁琐。为此，我们可以借助一些库来实现在Javascript中将数据自动复制到剪贴板的功能。

其中，npm包中有一款名为 clipboard 的库可以帮助我们实现这一功能。它可以让我们在Javascript中轻松地将文本、html 或图片复制到剪贴板中。接下来，我将为你介绍如何使用 clipboard 实现这一功能。

安装

首先，我们需要通过npm安装 clipboard :

npm install clipboard --save

引入

接下来，我们需要在相应的文件中引入 clipboard :

import ClipboardJS from 'clipboard';

使用

复制文本

如果我们需要复制文本到剪贴板中，可以使用 ClipboardJS 的 writeText 方法。例如：

const text = '这是需要复制的文本';
const clipboard = new ClipboardJS('.copy-btn', {
  text: () => text
});

clipboard.on('success', (e) => {
  console.log('复制成功！');
});

clipboard.on('error', (e) => {
  console.log('复制失败！');
});

// HTML
<button class="copy-btn" data-clipboard-action="copy" data-clipboard-target="#copy-text">复制</button>
<p id="copy-text">这是需要复制的文本</p>

这里，我们首先定义了一个需要复制的文本 text，并将其传入到 ClipboardJS 中。接着，我们在HTML文件中定义一个按钮，绑定了 ClipboardJS 的实例对象，并使用 data-clipboard-action 和 data-clipboard-target 属性指定复制操作和复制文本的元素。当按钮被点击后， ClipboardJS 将自动将文本复制到剪贴板中。

复制HTML

如果我们需要复制HTML内容到剪贴板中，可以使用 ClipboardJS 的 writeHtml 方法。例如：

const html = '<p style="color: red;">这是需要复制的HTML内容</p>';
const clipboard = new ClipboardJS('.copy-btn', {
  html: () => html
});

clipboard.on('success', (e) => {
  console.log('复制成功！');
});

clipboard.on('error', (e) => {
  console.log('复制失败！');
});

// HTML
<button class="copy-btn" data-clipboard-action="copy" data-clipboard-target="#copy-html">复制</button>
<div id="copy-html"><p style="color: red;">这是需要复制的HTML内容</p></div>

这里，我们首先定义了一个需要复制的HTML文本 html，并将其传入到 ClipboardJS 中。接着，我们在HTML文件中定义一个按钮，绑定了 ClipboardJS 的实例对象，并使用 data-clipboard-action 和 data-clipboard-target 属性指定复制操作和复制HTML内容的元素。当按钮被点击后， ClipboardJS 将自动将HTML内容复制到剪贴板中。

复制图片

如果我们需要复制图片到剪贴板中，可以使用 ClipboardJS 的 write 方法，并在回调函数中返回一个包含图片源地址的对象。例如：

const image = document.querySelector('#copy-image');
const clipboard = new ClipboardJS('.copy-btn', {
  text: () => '这是需要复制的图片',
  action: () => 'copy',
  target: () => image
});

clipboard.on('success', (e) => {
  console.log('复制成功！');
});

clipboard.on('error', (e) => {
  console.log('复制失败！');
});

// HTML
<button class="copy-btn">复制</button>
<img id="copy-image" src="./image.png" alt="" />

这里，我们首先定义了需要复制的图片元素 image，并将其传入到 ClipboardJS 中。接着，我们在HTML文件中定义一个按钮，绑定了 ClipboardJS 的实例对象。当按钮被点击后， ClipboardJS 将自动将图片复制到剪贴板中。

结论

到这里，我们就成功地介绍了如何在Javascript中使用 ClipboardJS 将文本、html或图片复制到剪贴板中。如果你需要更多的自定义配置，可以参考 ClipboardJS 的官方文档：https://clipboardjs.com/ .

参考链接：https://juejin.cn/post/6844903867128539144