引言

工作当中用到了这个库,十分好用!

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

码农有了它,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对象,我对这个研究不深,但目前工作需要就直接可以用了。

瑞思拜~

下班

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

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

最后修改:2023 年 12 月 21 日
如果您对各种技术博客文章感兴趣,欢迎关注拓行公众号,分享各种专业技术知识~