JavaScript实现点击复制JS访问剪贴板相关
一、具体代码
网页前端开发中有时会出现这样的场景：让用户点击某个按钮，然后就能直接复制对应的文本内容，让用户可以将文本内容粘贴到想要粘贴的地方，常用于分享功能模块中。如果想要实现这种效果就需要我们去访问用户的剪贴板，然后把想要复制的内容写入其中即可，本文主要讲解两种解决方案：document.execCommand()和Clipboard。
先上代码：
为了同时兼容新旧浏览器（IE！），我们一般采取下面的方式：
// 复制文本内容
function copyContent (content) {
// 复制结果
let copyResult = true
// 设置想要复制的文本内容
const text = content || '让我们一起快乐的敲代码吧~';
// 判断是否支持clipboard方式
if (!!window.navigator.clipboard) {
// 利用clipboard将文本写入剪贴板（这是一个异步promise）
window.navigator.clipboard.writeText(text).then((res) => {
console.log('复制成功');
// 返回复制操作的最终结果
return copyResult;
}).catch((err) => {
copyResult = false
console.log('复制失败', err);
// 返回复制操作的最终结果
return copyResult;
})
} else {
// 不支持clipboard方式 则采用document.execCommand()方式
// 创建一个input元素
let inputDom = document.createElement('textarea');
// 设置为只读 防止移动端手机上弹出软键盘
inputDom.setAttribute('readonly', 'readonly');
// 给input元素赋值
inputDom.value = text;
// 将创建的input添加到body
document.body.appendChild(inputDom);
// 选中input元素的内容
inputDom.select();
// 执行浏览器复制命令
// 复制命令会将当前选中的内容复制到剪切板中（这里就是创建的input标签中的内容）
// Input要在正常的编辑状态下原生复制方法才会生效
const result = document.execCommand('copy')
// 判断是否复制成功
if (result) {
console.log('复制成功');
} else {
console.log('复制失败');
copyResult = false
}
// 复制操作后再将构造的标签 移除
document.body.removeChild(inputDom);
// 返回复制操作的最终结果
return copyResult;
}
}
二、剪贴板
剪贴板是用于短期数据存储或者转移的数据缓存区，数据转移可以发生在不同的文档或应用程序之间。剪贴板常常实现为一个匿名的、临时的数据缓存，有时也叫做粘贴缓存，可由绝大部分位于已定义应用程序接口的环境中的程序访问。
三、Clipboard
1、简介
Clipboard API 提供了响应剪贴板命令和异步读写系统剪贴板的能力，该API是用来取代document.execCommand()这种剪贴板访问方式的。但是该API需要通过PerMissions API获取用户授予的权限（"clipboard-read" 或 "clipboard-write"）之后，才能访问剪贴板，如果用户拒绝授予相应权限，则无法访问剪贴板，调用Clipboard 对象的方法就会失败。而且该API仅在一些安全上下文环境中可用（HTTPS、localhost、127.0.0.1等），我们可以通过window.isSecureContext的返回值来判断当前环境是否为安全上下文环境。
我们可以通过window.navigator.permissions.query({name: "clipboard-read"}) 和window.navigator.permissions.query({name: "clipboard-write"}) 来判断当前网页是否拥有读写剪贴板的权限（Firefox不支持！）。
该API在 Window.navigator 接口上添加了只读属性 clipboard，该属性返回一个可以读写剪切板内容的 Clipboard 对象，我们前端大多是通过window.navigator.clipboard来访问剪贴板。
由于该API是一个较新的API，而且涉及的安全问题和技术复杂性太多，所以浏览器兼容性相对差一点（不支持IE）：
浏览器兼容性（Navigator.clipboard）：
2、Clipboard
该接口实现了Clipboard API，用于读写系统剪贴板上的文本和数据的接口，前端规范称其为异步剪贴板API（Async Clipboard API），因为该API下的所有方法都是异步的，它们会返回一个Promise对象，操作成功后调用resolve()，操作失败后调用reject()。
相关方法：
① read()
该方法用于从系统剪贴板中读取任意数据的副本（文本、图片等），返回一个Promise对象，在经过异步数据检索之后，Promise返回一个包含相关数据的ClipboardItem对象的数组，该数组含有两个数据对象，第一个对象中仅包含剪贴板中的文本数据，第二个对象中包含剪贴板中的所有内容数据。
该方法必须在网页获取焦点时，才能正常调用，否则会报错。而且该方法不能在JS中直接调用，只能在处理用户行为（点击等交互行为）时才能正常调用，否则会报错。
如果系统剪贴板中的内容是复制的系统本地的文件，则通过该方法只能访问到文件名，而无法访问到文件本身的内容。如果我们是复制的系统本地文件中的内容，并包含文本和图片，则该方法能正常获取到文本信息，但图片无法被获取到。
② readText()
该方法从系统剪贴板读取中文本数据的副本，返回一个Promise对象，在经过异步数据检索之后，Promise返回一个包含相关文本数据的String字符串数据。
该方法必须在网页获取焦点时，才能正常调用，否则会报错。但是与read()不同的是，该方法可以在JS中直接调用，不需要等待用户行为。
如果系统剪贴板中的内容是复制的系统本地的文件，则通过该方法可以访问到文件名。如果我们是复制的系统本地文件中的内容，并包含文本和图片，则该方法只能获取到其中文本信息。
案例代码：
<button onclick="clickRead()">点击访问剪贴板</button>
<p>我想调用Clipboard API来读取剪贴板信息</p>
<p>我想2342342342432</p>
<img src="./image/img.png" alt="">
<div>23423423422</div>
<script>
// 在刚进入页面时，先尝试获取剪贴板的内容
window.navigator.clipboard.read().then((res) => {
console.log('read--res-----', res);
}).catch((err) => {
console.log('read--err-----', err);
})
// 在刚进入页面时，先尝试获取剪贴板的文本内容
window.navigator.clipboard.readText().then((res) => {
console.log('readText--res-----', res);
}).catch((err) => {
console.log('readText--err-----', err);
})
// 用户点击按钮事件
function clickRead () {
// 再次尝试获取剪贴板的内容 promise异步操作
window.navigator.clipboard.read().then((res) => {
console.log('用户点击-read--res-----', res);
res[0].types.forEach((type, index) => {
// 通过getType读取剪贴板中对应的数据内容 并返回相应blob对象
res[0].getType(type).then(res => {
console.log('blob--', res);
let reader = new FileReader();
// 为了方便查看 将bolb转为base64 （异步操作）
reader.readAsDataURL(res);
// 转换成功
reader.onload = () => {
if (index === 0) {
console.log('用户剪贴板中的所有文本内容转换成的base64--', reader.result);
} else
if (index === 1) {
console.log('用户剪贴板中的所有数据内容内容转换成的base64--', reader.result);
}
};
});
})
}).catch((err) => {
// 读取失败的情况
console.log('用户点击-read--err-----', err);
})
// 在用户点击事件中 再次尝试获取剪贴板的文本内容
window.navigator.clipboard.readText().then((res) => {
// 读取成功的情况
console.log('用户点击-readText--res-----', res);
}).catch((err) => {
// 读取失败的情况
console.log('用户点击-readText--err-----', err);
})
}
</script>
页面未获取剪贴板访问权限时：
有权限但页面未获取焦点时：
有权限且页面获取焦点时：
有权限且页面获取焦点，并触发用户行为：
文本内容base64查看：
所有内容base64查看：
③ write()
该方法用于写入任意数据至系统剪贴板，参数为一个ClipboardItem对象数组（但每次只能包含一个ClipboardItem对象），里面包含了要写入剪贴板的数据，返回值为一个Promise对象，经过异步操作之后，返回执行结果。
目前主流浏览器都支持写入的 MIME 数据类型有：text/plain、text/html、image/png、text/uri-list。
④ writeText()
该方法用于写入文本数据至系统剪贴板，参数为一个String字符串，表示要写入剪贴板的文本数据，返回值为一个Promise对象，经过异步操作之后，返回执行结果。
案例代码：
<!-- 点击选择文件写入到剪贴板 -->
<input type="file" onchange="clickWrite(event)">
<script>
// 在刚进入页面时，先尝试向剪贴板写入内容
// 定义数据类型
const type = "text/plain";
// 创建一个blob对象
const blob = new Blob(['我是要通过write()写入剪贴板的内容1111'], { type });
// 创建一个ClipboardItem对象数组
const data = [new ClipboardItem({ [type]: blob })];
console.log('data--', data);
// 将数据写入剪贴板
window.navigator.clipboard.write(data).then((res) => {
console.log('write--res-----', res);
// 输出剪贴板中的内容
window.navigator.clipboard.readText().then((res) => {
console.log('readText--res-----', res);
}).catch((err) => {
console.log('readText--err-----', err);
})
}).catch((err) => {
console.log('write--err-----', err);
})
// 因为读写都是异步操作 为了避免两个写操作互相干扰 所以等待1秒后 再尝试向剪贴板写入文本内容
setTimeout(() => {
window.navigator.clipboard.writeText('我是要通过writeText()写入剪贴板的文本内容2222').then((res) => {
console.log('writeText--res-----', res);
// 输出剪贴板中的内容
window.navigator.clipboard.readText().then((res) => {
console.log('readText--res-----', res);
}).catch((err) => {
console.log('readText--err-----', err);
})
}).catch((err) => {
console.log('writeText--err-----', err);
})
}, 1000)
// 用户选择图片写入剪贴板事件
function clickWrite (e) {
console.log('file--', e.target.files[0]);
// 定义数据类型
const type = "image/png";
// 创建一个ClipboardItem对象数组
const data = [new ClipboardItem({ [type]: e.target.files[0] })];
console.log('data--', data);
// 将数据写入剪贴板
window.navigator.clipboard.write(data).then((res) => {
console.log('write--res-----', res);
// 输出剪贴板中的内容
window.navigator.clipboard.read().then((res) => {
console.log('read--res-----', res);
}).catch((err) => {
console.log('read--err-----', err);
})
}).catch((err) => {
console.log('write--err-----', err);
})
}
</script>
执行结果：
3、ClipboardEvent
该接口继承了Event接口，提供了有关系统剪贴板信息修改的事件，即cut、copy、paste事件，前端规范称其为剪贴板事件（Clipboard Event API）。
我们可以通过ClipboardEvent(type[, options])构造函数来创建ClipboardEvent对象，第一个参数type，是一个字符串，表示当前事件类型的名字，可以为：cut、copy、paste，大小写敏感；第二个参数options是可选的，内包含一个clipboardData属性，该属性的值是一个DataTransfer对象，包含了剪贴板事件所涉及的数据。
var clipboardEvent = new ClipboardEvent(type[, options]);
// 实例
var clipboardEvent = new ClipboardEvent('paste', {
clipboardData: new DataTransfer()
});
ClipboardEvent.clipboardData 属性保存了一个 DataTransfer 对象，该对象有两个用途：① 用于指定通过cut和copy事件写入到剪贴板中的数据，通常使用setData(format,data)来指定数据。② 用于从paste事件中获取想要从剪贴板中读取的数据，通常使用getData(fomat)来获取。fomat表示数据类型，例如：text/plain、text/uri-list。
案例代码：
var clipboardEvent = new ClipboardEvent('paste', {
clipboardData: new DataTransfer()
});
console.log('clipboardEvent--', clipboardEvent.clipboardData.getData('text/plain'));
clipboardEvent.clipboardData.setData('text/plain', 'Clipboard API来读取剪贴板信息');
console.log('clipboardEvent--', clipboardEvent.clipboardData.getData('text/plain'));
执行结果：
4、ClipboardItem
该接口表示在使用read()和write()读写剪贴板数据时，单个数据的数据格式，该数据格式中将 MIME 类型作为key，将数据作为value。
① 创建ClipboardItem对象
可通过构造函数ClipboardItem(data[, options])来创建该对象，第一个参数为想要存储的数据，可以为Blob、String或Promise（但个人开发发现file对象也可以）；第二个对象参数表示数据的呈现形式，该对象只包含presentationStyle属性，属性值有三种：unspecified、inline和attachment. 默认值为unspecified，但是该属性支持性特别差：Chrome、Edge、Firefox、Opera都不支持该属性，Safari支持该属性，所以该属性了解即可。
我们也可以通过ClipboardItem.presentationStyle来获取当前对象的数据呈现形式。
new ClipboardItem(data[, options])
// 实例
const test = new ClipboardItem({ ["text/plain"]: new Blob(['我是小朱同学'], { "text/plain" }) }
② 读取ClipboardItem对象中的数据
首先我们可以通过ClipboardItem.types获取当前ClipboardItem对象中所有MIME 类型组成的数组，然后再通过getType(type)方法来异步读取对应的数据，返回一个Promise，读取的数据为Blob类型：
ClipboardItem.types.forEach(type => {
ClipboardItem.getType(type).then(res => {
console.log('blob--', res);
})
})
二、document.execCommand()
1、简介
该方法用来操作当前聚焦的可编辑元素（input、textarea）中的内容，例如复制、剪贴、粘贴、删除、文本加粗、插入图片等等效果，有些富文本编辑器组件就是基于该API进行开发。而且该API的兼容性很好，可以兼容到IE6及以上。该API已经不推荐使用了，因为现在该API已经被Clipboard全面替代，虽然目前多数主流浏览器还支持使用，但随时有可能被完全弃用。
浏览器兼容性：
2、基本语法
cosnt result = document.execCommand(aCommandName[,aShowDefaultUI,aValueArgument])
参数：
① aCommandName：一个命令字符串，表示要执行操作的名称，常用的有：copy、cut、paste、bold等等，具体可查询：execCommand。
② aShowDefaultUI ：一个布尔值，表示是否展示用户界面，一般为false（Firefox不支持）。
③ aValueArgument：第一个参数中的某些命令需要的额外参数，默认为null，例如：insertImage 需要提供插入 image 的 url。
返回值：
① 一个Boolean：表示要执行操作是否执行成功（true），若为false，则表示操作不被支持或操作失败。
3、基本使用
function copyInputContent () {
// 设置想要复制的文本内容
const text = '让我们一起快乐的敲代码吧~';
// 创建一个input元素
let inputDom = document.createElement('textarea');
// 设置为只读 防止移动端手机上弹出软键盘
inputDom.setAttribute('readonly', 'readonly');
// 给input元素赋值
inputDom.value = text;
// 将创建的input添加到body
document.body.appendChild(inputDom);
// 选中input元素的内容
inputDom.select();
// 执行浏览器复制命令
// 复制命令会将当前选中的内容复制到剪切板中（这里就是创建的input标签中的内容）
// Input要在正常的编辑状态下原生复制方法才会生效
const result = document.execCommand('copy')
// 复制操作后再将构造的标签 移除
document.body.removeChild(inputDom);
}
三、参考文档
这篇好文章是转载于：学新通技术网
- 版权申明： 本站部分内容来自互联网，仅供学习及演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，请提供相关证据及您的身份证明，我们将在收到邮件后48小时内删除。
- 本站站名： 学新通技术网
- 本文地址： /boutique/detail/tanhibkcbg
-
Error in na.fail.default(list(Purchase = c(“CH“, “CH“, “CH“, “MM“, “CH“, : missing values in obj
-
[CTF] python的pip源更改和常用python库
-
LLaMA-2进行微调的FreeWilly2开源语言模型
-
首次vue加载页面，请求两个接口，后者接口需要依赖前者接口的数据去请求接口。
-
MobaXterm 连接服务器过指定连接数量默认14个Warning: you have reached the maximum number of saved sessions for the
-
C# excel的数据导入到数据库 数据库数据导出excel
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
excel图片置于文字下方的方法
PHP中文网 06-27 -
Android 11 保存文件到外部存储，并分享文件
Luke 10-12 -
微信提示登录环境异常是什么意思原因
PHP中文网 04-09 -
微信运动停用后别人还能看到步数吗
PHP中文网 07-22 -
微信人名旁边有个图标有什么用
PHP中文网 03-11
