如何批量复制网页内容,如何复制网页全部内容

首页 > 实用技巧 > 作者:YD1662023-07-30 20:31:03

从方法名可以看出,writeText()方法仅支持写入文本,无其他数据类型的需求可直接使用该方法。

navigator.clipboard.writeText("想复制的文本作为参数") .then(() => { /* 剪贴板写入成功 */ }, () => { /* 剪贴板写入失败 */ });

write()

如何批量复制网页内容,如何复制网页全部内容(5)

write()方法支持写入任意格式的数据至剪贴板,但传参的数据需要经过特殊处理,参考MDN文档有提供一些方法。


对于图片数据,常用的处理方法是利用Clipboard API提供的ClipboardItem接口,以MIME类型为key和blob为value的对象作为其参数,new一个相关实例,再作为write()方法的参数,写入剪贴板。

// 已准备好图片blob数据后 执行 navigator.clipboard.write([new ClipboardItem({ [blob.type]: blob })]) .then(() => { /* 剪贴板写入成功 */ }, () => { /* 剪贴板写入失败 */ });

需要注意的是以上两种方法均为异步执行,执行成功与失败都有相应的回调。

介绍完复制要用的基础API,下面分别详细介绍下复制文本内容和图片内容的具体方法。
以下,推荐方法基于Clipboard API,向下兼容方法基于 document.execCommand(‘copy’)。

document.execCommand(‘copy’)

相关MDN外链地址

https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand

(请复制链接到浏览器中打开)

兼容性

document.execCommand(‘copy’)向document提供的execCommand方法传参"copy"所得的方法,该方法已被官方标记为弃用,较老版本的浏览器仍支持,可能在未来某版本中就会将它完全抹掉。

如何批量复制网页内容,如何复制网页全部内容(6)

因此该方法仅适合在确定需要兼容不支持新方法的浏览器/WebView中使用。

验证目标浏览器是否支持该方法:
打开控制台输入document.execCommand(‘copy’)后回车,返回true就是支持,false就是不支持。

如何批量复制网页内容,如何复制网页全部内容(7)

题外话:
读取用户剪贴板内容由于严重涉及到用户隐私,且使用

document.execCommand(‘paste’)粘贴没有一个明确获取用户权限的过程,该方法目前已完全被浏览器禁掉,因此在控制台输入它后返回的是false。

如何批量复制网页内容,如何复制网页全部内容(8)

上一页1234下一页

栏目热文

文档排行

本站推荐

Copyright © 2018 - 2021 www.yd166.com., All Rights Reserved.