不使用DOM元素复制字符串到剪贴板？

Question

我有一个运作正常的代码：

let textarea = document.createElement('textarea');
textarea.setAttribute('type', 'hidden');
textarea.textContent = 'the string you want to copy';
document.body.appendChild(textarea);
textarea.select();
document.execCommand('copy');

正如您所看到的 - 我手头已经有要复制的字符串。但是在复制到剪贴板之前，我必须创建一个临时隐藏的DOM元素来存储该字符串。

我的问题是，是否有一些API可以在完全不需要DOM的情况下进行剪贴板复制？类似于这样：

document.execCommand('copy', 'the string data to put in clipboard');

看起来需要使用DOM才能做到这一点，感觉有些奇怪。另外，作为一个附注，这个剪贴板API非常奇怪，有其他人同意吗？

- user7898461

---

有些浏览器中的操作需要用户事件来防止恶意或滥用的不必要行为。 - charlietfl

是的，但在这种情况下，没有点击或任何操作，我想不到任何用户事件？ - user7898461

通常需要一个用户事件来初始化写入剪贴板。而且在很长一段时间内，您无法这样做。将其包装在一个简单的辅助函数中，这样调用就很容易了。 - epascarello

不，没有这样的API。 - wOxxOm

唯一的替代DOM的方法是编写一个外部实用程序，单独安装，可以通过nativeMessaging API与扩展通信，并使用操作系统复制到剪贴板，但显然这个“解决方案”甚至更糟。 - wOxxOm

Answer 1

您可以使用异步剪贴板API来实现在Web应用程序中的剪切、复制和粘贴功能，但请注意它只能在安全连接（HTTPS）和本地主机下使用。

const copyToClipboard = (textToCopy) => {
   navigator.clipboard.writeText(textToCopy)
   .then(() => {
      // actions to take
   })
   .catch(err => {
      console.log('Something went wrong', err);
   });
 }

- knigalye

Answer 2

我最近也遇到了和你一样的问题，但是没有一个解决方案不影响DOM。以下内置函数可以帮助你。

copyToClipboard("Your variable/string")

copyToClipboard 函数允许您将变量或字符串复制到系统剪贴板。这是 Clipboard API 的一部分，点击查看文档。

- Hari Prasath