ClipboardItem: ClipboardItem() constructor
Baseline 2024Newly available
Since June 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
The ClipboardItem()
constructor creates a new ClipboardItem
object, which represents data to be stored or retrieved via the Clipboard API clipboard.write()
and clipboard.read()
methods, respectively.
Note:
The read()
and write()
methods can be used to work with text strings and arbitrary data items represented by Blob
instances. However, if you are solely working with text, it is more convenient to use the Clipboard.readText()
and Clipboard.writeText()
methods.
Note:
Image format support varies by browser. See the browser compatibility table for the Clipboard
interface.
Syntax
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 one of the following: options
Optional-
An object with the following properties:
presentationStyle
Optional-
One of the three strings:
unspecified
,inline
orattachment
. The default isunspecified
.inline
signifies to apps that receive the paste that theClipboardItem
should be inserted inline at the point of paste.attachment
signifies to apps that receive the paste that theClipboardItem
should be added as an attachment.unspecified
doesn't signify any information to apps that receive the paste.
Examples
The below example requests a PNG image using fetch()
, and in turn, the Response.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.
async function writeClipImg() {
try {
if (ClipboardItem.supports("image/png")) {
const imgURL = "/my-image.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.");
} else {
console.log("image png is not supported");
}
} catch (err) {
console.error(err.name, err.message);
}
}
Specifications
Specification |
---|
Clipboard API and events # dom-clipboarditem-clipboarditem |