在前端开发中，有时我们需要将页面上的一些文本、代码或链接等内容复制到粘贴板上，以便用户可以方便地将它们粘贴到其他地方。这时，一个易于使用的 npm 包 copy-to-clip 就可以派上用场。
copy-to-clip 是一个用于将文本复制到剪贴板上的库，它不需要使用 Flash，只需使用简单的 JavaScript 就能让它发挥作用。copy-to-clip 的 API 是简单的，只有两个方法：copy(text) 和 paste()。
安装 copy-to-clip
首先，在你的项目中安装 copy-to-clip。可以使用 npm 安装或直接引入其源代码。
使用 npm 安装：
npm install copy-to-clip --save
引入源代码：
<script src="path/to/copy-to-clip.js"></script>
使用 copy-to-clip
使用 copy-to-clip 很简单。只需调用它的 copy() 方法并传递要复制的文本内容作为参数即可。
import copy from 'copy-to-clip';
copy('Hello, world!');同时，copy-to-clip 的 paste() 方法也很简单，只需调用它即可将剪贴板上的文本粘贴到你的应用程序中。
import { paste } from 'copy-to-clip';
const text = paste();
console.log(text);copy-to-clip 的学习与指导意义
copy-to-clip 这个无需依赖 Flash 的 JavaScript 库，提供了一种便捷的剪贴板写入和读取方式，使前端开发人员能够更加方便地使用剪贴板。
除了简单易用之外，使用 copy-to-clip 还有许多优点：
- 无需 Flash 插件
- 跨平台支持，可以在各种桌面和移动设备上运行
- 支持大多数主流浏览器，包括 Chrome、Firefox、Safari、IE 和 Edge 等
使用 copy-to-clip 可以帮助前端开发人员提高效率，节省时间，快速实现所需的功能。此外，与其相似的还有 Clipboard.js 库，两者对比可以更好的选择适合自己的库。
示例代码
以下是在 React 中使用 copy-to-clip 的一个示例：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ ---- ---- ---------------
-------- ----- -
----- ------ -------- - -------------
----- ---------- - -- -- -
-----------
------------- -- -------------
--
------ -
-----
------
-----------
------------
------------- -- ------------------------
--
------- ----------------------------------
------
--
-上面的代码使用 useState Hook 来保存输入框中的文本，并使用 copy-to-clip 库将其复制到粘贴板上。当用户点击“复制”按钮时，会弹出一个提示框，告诉用户已经将文本复制到了剪贴板上。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056cb981e8991b448e6252