ClipboardItem: ClipboardItem() constructor
The ClipboardItem()
constructor of the Clipboard API
creates a new ClipboardItem
object which represents data to be stored or retrieved via the Clipboard API
, that is clipboard.write()
and clipboard.read()
respectively.
Note: Image format support varies by browser. See the browser compatibility table for the Clipboard
interface.
Syntax
js
new ClipboardItem(data)
new ClipboardItem(data, options)
Parameters
data
-
An
Object
with the MIME type as the key and data as the value. The data can be represented as aBlob
, aString
or aPromise
which resolves to either a blob or string. options
Optional-
An object with the following properties:
presentationStyle
Optional-
One of the three strings:
unspecified
,inline
orattachment
. The default isunspecified
.
Note: You can also work with text via the Clipboard.readText()
and Clipboard.writeText()
methods of the Clipboard
interface.
Examples
The below example requests a png image using the Fetch API
, and in turn, the responses' blob()
method, to create a new ClipboardItem
. This item is then written to the clipboard, using the Clipboard.write()
method.
Note: You can only pass in one clipboard item at a time.
js
async function writeClipImg() {
try {
const imgURL = "/myimage.png";
const data = await fetch(imgURL);
const blob = await data.blob();
await navigator.clipboard.write([
new ClipboardItem({
[blob.type]: blob,
}),
]);
console.log("Fetched image copied.");
} catch (err) {
console.error(err.name, err.message);
}
}
Specifications
Specification |
---|
Clipboard API and events # dom-clipboarditem-clipboarditem |
Browser compatibility
BCD tables only load in the browser