推荐一个Js的剪贴板操作库clipboard-polyfill

博主：黄炜
发布时间：2023 年 12 月 21 日
470 次浏览
2222字数
分类：技术 JavaScript 小工具

### 引言

工作当中用到了这个库，十分好用！

可以直接快速调用代码进行复制常规文本、富文本、图像地址等信息，方便快捷！

码农有了它，CV不是梦~

#### 需求

有时候，我们很多时候的业务不一定是很单纯的，只在一个单纯的项目内进行数据传递，功能完成，很多时候会用到第三方的工具来完成。

比如：从网页的项目内复制到**微信**或**QQ邮箱**发送

微信可不会给你提供接口，让你进行发送，所以只能是用户自己手动复制，然后粘贴。

#### 传送门

首先是官网链接，附上`GitHub`的项目网址：

`lgarron/clipboard-polyfill`项目

[https://github.com/lgarron/clipboard-polyfill](https://github.com/lgarron/clipboard-polyfill)

```js
// 导入这个库
import * as clipboard from 'clipboard-polyfill'

// vue项目的若干代码
// 此处省略vue的data、methods等
// ……

// 复制纯文本代码
copy() {
    clipboard.writeText("要复制的文本内容");
}

// 复制富文本代码
async copyRichText() {
    let item = new clipboard.ClipboardItem({
        "text/html": new Blob(
            // 注意，这里是数组，需要有中括号
            [`<div>你要复制的富文本HTML代码</div>`],
            { type: "text/html" }
        )
    });
    // 注意，这里是数组，需要有中括号
    await clipboard.write([item]);
}
```

#### 唠叨

自己搞了个公众号，如果有兴趣可以关注一下，会有各种好玩的技术文章可以看，大佬有时间也可以瞅瞅，欢迎各位不吝赐教~

![拓行公众号](https://aliyun-yuesha-public-oss.oss-cn-zhangjiakou.aliyuncs.com/usr/uploads/2023/12/654410095.png)

### 安装

如果你是一个`npm`搭建的项目，可以很方便快捷的安装上去。

在项目的根目录，打开命令行工具，输入命令：

```shell
npm install clipboard-polyfill --save
```

输入完成后回车，此时，`npm`工具就会帮你下载这个库到你的项目里。

等待一会，就可以看到安装完成了。

### 使用

正如安装的便捷，使用起来也是非常方便。

#### 复制纯文本内容

我就直接上干货了~

```js
// 导入这个库
import * as clipboard from 'clipboard-polyfill'

// 复制纯文本代码
copy() {
    clipboard.writeText("要复制的文本内容");
}
```

#### 复制富文本内容

##### 1. 必须是`HTML`标签字符串

你这里的富文本，得是带有`HTML`标签的文本字符串。

比如：`<h2><b>今天</b>，呀，我很高兴！</h2>`

这样子的文本串，才能够作为入参。

##### 2. 可以获取页面上已有的元素进行复制

或者你可以获取页面已有的效果，直接作为富文本字符串。

具体步骤是：

1. 通过`document.getElementById()`方法获取到元素节点（或者其他方式都可）
2. 通过`outerHTML`属性获取源码字符串
3. 传入源码字符串，构建`ClipboardItem`对象
4. 传入`write`函数，实现写入剪贴板

代码实现是：

```js
// 导入这个库
import * as clipboard from 'clipboard-polyfill'

// 获取DOM元素并获取到源码字符串
let domCodeStr = document.getElementById('你的元素ID值').outerHTML

let item = new clipboard.ClipboardItem({
    "text/html": new Blob(
        // 注意，这里是数组，需要有中括号
        [`<div>${domCodeStr}</div>`],
        { type: "text/html" }
    )
});
// 注意，这里是数组，需要有中括号
clipboard.write([item]);
```

这里用到了个`Blob`对象，我对这个研究不深，但目前工作需要就直接可以用了。

瑞思拜~

下班

欢迎关注拓行公众号，分享各种技术博客文章

拓行——奋勇进取，开拓未来，砥砺前行

最后修改：2023 年 12 月 21 日

如果您对各种技术博客文章感兴趣，欢迎关注拓行公众号，分享各种专业技术知识~

推荐一个Js的剪贴板操作库clipboard-polyfill

typecho后台文章撰写的自定义字段默认收起

手把手教你在Linux下源码编译安装phpv8.3.0最新版

手把手教你在Linux下源码搭建MySQL关系型数据库v8.2.0最新社区版

Linux如何上传、下载传输文件或目录

手把手教你源码搭建Nginx服务器v1.25.3最新版（非root启动）

windows电脑的ssh秘钥和公钥生成

Android Studio 卡在fastutil-7.2.0.jar不动

Linux下如何实现服务管理以及自启动（以Nginx为例）

山东省-临沂市

typecho后台文章撰写使用Ctrl+S快捷键储存草稿

推荐一个Js的剪贴板操作库clipboard-polyfill