ClipboardItem()

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

var ClipboardItem = new ClipboardItem(ClipboardItemData);

Parameters

ClipboardItemData
An Object with the MIME type as the key and data as the value. The data can represented as a Blob, a String or a Promise which resolves to either a blob or string.
ClipboardItemOptions Optional
An Object with the following properties:
  • presentationStyle: One of "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.

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 Status Comment
Clipboard API and events
The definition of 'ClipboardItem' in that specification.
Working Draft Initial definition.

Browser compatibility

BCD tables only load in the browser

See also