Clipboard:write() 方法
Clipboard
的方法 write()
写入图片等任意的数据到剪贴板。这个方法可以用于实现剪切和复制的功能。
当页面位于活动选项卡中时,权限 API (en-US) 中的 "clipboard-write"
权限会自动授予该页面。
备注: 为了与 Google Chrome 浏览器保持一致,Firefox 只允许此函数处理文本、HTML 和 PNG 数据。
语法
js
write(data)
参数
data
-
包含要写入剪贴板的数据的
ClipboardItem
(en-US) 对象数组。
返回值
示例
以下示例代码将展示如何将剪贴板的内容替换为指定的字符串。
js
function setClipboard(text) {
const type = "text/plain";
const blob = new Blob([text], { type });
const data = [new ClipboardItem({ [type]: blob })];
navigator.clipboard.write(data).then(
() => {
/* success */
},
() => {
/* failure */
},
);
}
代码首先创建了一个新的 Blob
对象,需要使用该对象来构造 ClipboardItem
(en-US) 对象,并将其发送到剪贴板。Blob
构造函数接收我们要复制的内容及类型,一个 Blob
对象可以有不同的来源,例如 canvas。
接下来,我们创建一个新的 ClipboardItem
(en-US) 对象,并在其中放置 blob,以写入到剪贴板。传递给 ClipboardItem
(en-US) 构造函数的对象的键名表示内容类型,值表示内容。然后调用 write()
,并指定复制成功和失败的回调函数。
复制 canvas 内容至剪贴板的示例
js
function copyCanvasContentsToClipboard(canvas, onDone, onError) {
canvas.toBlob((blob) => {
let data = [new ClipboardItem({ [blob.type]: blob })];
navigator.clipboard.write(data).then(
() => {
onDone();
},
(err) => {
onError(err);
},
);
});
}
备注: 一次只能传入一个剪贴板项目。
规范
Specification |
---|
Clipboard API and events # dom-clipboard-write |
浏览器兼容性
BCD tables only load in the browser