ClipboardItem: ClipboardItem() constructor

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: 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 a Blob, a String or a Promise 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 or attachment. The default is unspecified.

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

Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
ClipboardItem() constructor

See also