在前端开发中，经常需要将数据复制到剪贴板中，以便用户可以方便地粘贴到其他应用程序中。然而，某些情况下，我们可能无法正确地复制内容并将其显示在剪贴板中，并且在某些浏览器中，未被授权的访问剪贴板会导致安全问题。
本文将介绍如何使用浏览器 API 来复制文本、图像和文件，并解释为什么有些情况下复制操作不起作用。
如何复制文本到剪贴板
要将文本复制到剪贴板中，我们需要使用浏览器提供的 Clipboard API。该 API 由三个主要方法组成：
- writeText(text)：将给定的纯文本字符串写入剪贴板。
- readText()：从剪贴板中读取纯文本字符串。
- write(data)：将指定的 MIME 类型数据写入剪贴板。
以下是一个示例代码，它展示了如何将文本写入剪贴板中：
async function copyToClipboard(text) {
try {
await navigator.clipboard.writeText(text);
console.log('Text copied to clipboard');
} catch (err) {
console.error('Failed to copy text: ', err);
}
}在上面的代码中，我们定义一个名为 copyToClipboard 的异步函数，它接受一个字符串参数作为要复制到剪贴板中的文本。如果成功地将文本写入剪贴板，则会在控制台上输出一条成功消息，否则会输出错误消息。
如何复制图像和文件到剪贴板
现代浏览器还支持将图像和文件复制到剪贴板中。要复制图像，我们需要使用 write() 方法，并将 MIME 类型设置为图像格式（例如 image/png 或 image/jpeg）。对于文件，我们可以使用 write() 方法，并将 MIME 类型设置为文件格式（例如 application/pdf 或 text/plain）。
以下是一个示例代码，它展示了如何复制图像和文件到剪贴板中：
-- -------------------- ---- -------
----- -------- ------------------------------ -
--- -
----- -------- - ----- ----------------
----- ---- - ----- ----------------
----- ---------------------------
--- ---------------
------------ ----
--
---
------------------ ------ -- ------------
- ----- ----- -
--------------------- -- ---- ------ -- -----
-
-
----- -------- ---------------------------- -
--- -
----- -------- - ----- ---------------
----- ---- - ----- ----------------
----- ---------------------------
--- ---------------
------------ ----
--
---
----------------- ------ -- ------------
- ----- ----- -
--------------------- -- ---- ----- -- -----
-
-在上面的代码中，我们定义了两个名为 copyImageToClipboard 和 copyFileToClipboard 的异步函数，它们分别接受一个 URL 参数作为要复制到剪贴板中的图像和文件。如果成功地将图像或文件写入剪贴板，则会在控制台上输出一条成功消息，否则会输出错误消息。
为什么有时复制操作不起作用
在某些情况下，可能无法正确地复制内容并将其显示在剪贴板中。这通常是由于浏览器安全性限制所致。为了避免恶意网站滥用访问剪贴板的权限，浏览器只允许在用户明确的交互行为（例如单击按钮）之后才能访问
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/11238
