引言

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

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

码农有了它，CV不是梦~

需求

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

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

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

传送门

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

lgarron/clipboard-polyfill项目

https://github.com/lgarron/clipboard-polyfill

// 导入这个库
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]);
}

唠叨

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

安装

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

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

npm install clipboard-polyfill --save

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

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

使用

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

复制纯文本内容

我就直接上干货了~

// 导入这个库
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函数，实现写入剪贴板

代码实现是：

// 导入这个库
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对象，我对这个研究不深，但目前工作需要就直接可以用了。

瑞思拜~

下班