ClipboardItem: ClipboardItem() Konstruktor
Baseline
2025
Newly available
Since February 2025, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Sicherer Kontext: Diese Funktion ist nur in sicheren Kontexten (HTTPS) in einigen oder allen unterstützenden Browsern verfügbar.
Der ClipboardItem() Konstruktor erstellt ein neues ClipboardItem-Objekt, das Daten repräsentiert, die über die Clipboard API mit den Methoden clipboard.write() und clipboard.read() gespeichert oder abgerufen werden können.
Hinweis:
Die Methoden read() und write() können verwendet werden, um mit Textzeichenfolgen und beliebigen Datenelementen zu arbeiten, die durch Blob-Instanzen dargestellt werden. Wenn Sie jedoch ausschließlich mit Text arbeiten, ist es bequemer, die Methoden Clipboard.readText() und Clipboard.writeText() zu verwenden.
Hinweis:
Die Unterstützung des Bildformats variiert je nach Browser. Siehe die Browser-Kompatibilitätstabelle für das Clipboard-Interface.
Syntax
new ClipboardItem(data)
new ClipboardItem(data, options)
Parameter
data-
Ein
Objectmit dem MIME-Typ als Schlüssel und den Daten als Wert. Die Daten können wie folgt dargestellt werden: optionsOptional-
Ein Objekt mit den folgenden Eigenschaften:
presentationStyleOptional-
Einer der drei Zeichenfolgen:
unspecified,inlineoderattachment. Der Standardwert istunspecified.inlinebedeutet, dass Apps, die das Einfügen erhalten, denClipboardIteman der Einfügestelle inline einfügen sollen.attachmentbedeutet, dass Apps, die das Einfügen erhalten, denClipboardItemals Anhang hinzufügen sollen.unspecifiedgibt keine Information zur Einfügung an die Apps weiter.
Beispiele
Das folgende Beispiel fordert ein PNG-Bild an, indem fetch() und die Methode Response.blob() verwendet werden, um ein neues ClipboardItem zu erstellen. Dieses Element wird dann mit der Methode Clipboard.write() in die Zwischenablage geschrieben.
Hinweis: Sie können jeweils nur ein Zwischenablageelement übergeben.
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);
}
}
Spezifikationen
| Specification |
|---|
| Clipboard API and events # dom-clipboarditem-clipboarditem |