ClipboardItem: ClipboardItem() Konstruktor

Baseline 2024

Newly available

Since June 2024, 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 Unterstützung für Bildformate variiert je nach Browser. Siehe die Tabelle zur Browser-Kompatibilität für das Clipboard Interface.

Syntax

js
new ClipboardItem(data)
new ClipboardItem(data, options)

Parameter

data

Ein Object mit dem MIME-Typ als Schlüssel und den Daten als Wert. Die Daten können als Blob, als String oder als Promise dargestellt werden, die entweder in einem Blob oder String aufgelöst wird.

options Optional

Ein Objekt mit den folgenden Eigenschaften:

presentationStyle Optional

Eines der drei Zeichenfolgen: unspecified, inline oder attachment. Der Standardwert ist unspecified.

inline signalisiert den Apps, die den Einfügevorgang empfangen, dass das ClipboardItem an der Einfügestelle inline eingefügt werden soll. attachment signalisiert den empfängenden Apps, dass das ClipboardItem als Anhang hinzugefügt werden soll. unspecified übermittelt den empfangenden Apps keine Informationen.

Hinweis: Sie können auch mit Text über die Methoden Clipboard.readText() und Clipboard.writeText() des Clipboard Interfaces arbeiten.

Beispiele

Im folgenden Beispiel wird ein PNG-Bild mit fetch() und der Methode Response.blob() angefordert, um ein neues ClipboardItem zu erstellen. Dieses Element wird dann mit der Methode Clipboard.write() in die Zwischenablage geschrieben.

Hinweis: Sie können nur jeweils ein Element in die Zwischenablage kopieren.

js
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

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch