复制插件

title: 复制插件 id: 9483ad48cca08818a768d94d426c46f4 tags: [] date: 2000/01/01 00:00:00 updated: 2023/11/23 15:37:51 isPublic: true --#|[分隔]|#--

复制插件

现在可以使用浏览器原生api来复制了：

navigator.clipboard.writeText("要复制的文本")

这样就不需要下面的库了。

工具一：以js方法的形式复制(个人推荐)

注意，这个插件的旧版本为 clipboard-js，旧版本对浏览器兼容有很大问题。

教程：https://www.npmjs.com/package/clipboard-polyfill

官方仓库：https://github.com/lgarron/clipboard-polyfill

支持npm引入和html中script标签引入，有一点就是，需要用户触发才能复制成功，这基本不会影响功能，复制功能肯定是点击复制按钮才会复制的。

使用npm

安装

npm install -S clipboard-polyfill

使用

// 引入
import * as clipboard from "clipboard-polyfill";

// 复制功能的方法
function copy(text) {
  clipboard.writeText("复制的文本") // 复制
}

静态html项目

下载js库：clipboard-polyfill.promise.js

使用

// 引入js工具
<script src="./clipboard-polyfill.promise.js"></script>
<script>
  // 复制功能的方法
  function copy() {
    clipboard.writeText("hello world!"); // 复制
  }
</script> 

工具二：通过给Dom标签写属性，用工具初始化后，再点击标签复制

中文文档：http://www.clipboardjs.cn/

官方仓库：https://github.com/zenorocha/clipboard.js