引言
工作当中用到了这个库,十分好用!
可以直接快速调用代码进行复制常规文本、富文本、图像地址等信息,方便快捷!
码农有了它,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. 可以获取页面上已有的元素进行复制
或者你可以获取页面已有的效果,直接作为富文本字符串。
具体步骤是:
- 通过
document.getElementById()
方法获取到元素节点(或者其他方式都可) - 通过
outerHTML
属性获取源码字符串 - 传入源码字符串,构建
ClipboardItem
对象 - 传入
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
对象,我对这个研究不深,但目前工作需要就直接可以用了。
瑞思拜~
下班