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 aBlob
, aString
or aPromise
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
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
ClipboardItem |
66
The
ClipboardItem constructor only accepts a blob as the item data, but not strings or Promises that resolve to strings or blobs. See bug 1014310. |
79
The
ClipboardItem constructor only accepts a blob as the item data, but not strings or Promises that resolve to strings or blobs. See bug 1014310. |
87 |
No |
Yes
The
ClipboardItem constructor only accepts a blob as the item data, but not strings or Promises that resolve to strings or blobs. See bug 1014310. |
13.1 |
66
The
ClipboardItem constructor only accepts a blob as the item data. Full implementation would also allow for a string or a Promise which resolves with either a string or blob. See bug 1014310. |
66
The
ClipboardItem constructor only accepts a blob as the item data. Full implementation would also allow for a string or a Promise which resolves with either a string or blob. See bug 1014310. |
87 |
Yes
The
ClipboardItem constructor only accepts a blob as the item data, but not strings or Promises that resolve to strings or blobs. See bug 1014310. |
13.4 |
9.0
The
ClipboardItem constructor only accepts a blob as the item data, but not strings or Promises that resolve to strings or blobs. See bug 1014310. |
See also
© 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/ClipboardItem/ClipboardItem