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

Posted 2023-02-22

【中文标题】将字符串复制到剪贴板，而不使用 DOM 元素？

【英文标题】：Copy string to clipboard, without using a DOM element?

【发布时间】：2018-06-21 07:13:17

【问题描述】：

我有这个有效的代码：

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 非常奇怪，其他人同意吗？

【问题讨论】：

浏览器中的某些内容需要用户事件来防止恶意或滥用的不需要的操作

是的，但是在这种情况下，没有点击或任何东西，没有我能想到的用户事件？

您通常需要一个用户事件来初始化它并写入剪贴板。而且很长一段时间你都做不到。将其包装在一个简单的辅助函数中，它会很容易调用。

不，没有这样的 API。

DOM的唯一替代方案是编写一个外部实用程序，单独安装，它可以通过nativeMessaging API与扩展程序通信并使用OS复制到剪贴板，但显然这种“解决方案”更糟糕.

【参考方案1】：

您可以使用异步 剪贴板 API，该 API 用于在 Web 应用程序中实现剪切、复制和粘贴功能，但请记住，它适用于安全连接 (HTTPS) 和 localhost。

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

【参考方案2】：

我最近遇到了和你一样的问题，但没有一个解决方案能在不影响 DOM 的情况下提供解决方案。以下内置功能可以帮助您。

copyToClipboard("Your variable/string")

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