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 darstellt, die über die Clipboard API mithilfe der Methoden clipboard.write() und clipboard.read() gespeichert oder abgerufen werden sollen.

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: Der Bildformatsupport variiert je nach Browser. Sehen Sie sich die Browser-Kompatibilitätstabelle für die Clipboard-Schnittstelle an.

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 wie folgt dargestellt werden:

  • ein Blob
  • ein String
  • ein Promise, das entweder zu einem Blob oder String aufgelöst wird.
options Optional

Ein Objekt mit den folgenden Eigenschaften:

presentationStyle Optional

Einer der drei Strings: unspecified, inline oder attachment. Der Standardwert ist unspecified.

inline signalisiert den Empfängeranwendungen, dass das ClipboardItem an der Stelle des Einfügens inline eingefügt werden soll. attachment signalisiert den Empfängeranwendungen, dass das ClipboardItem als Anhang hinzugefügt werden soll. unspecified signalisiert den Empfängeranwendungen keine spezielle Information beim Einfügen.

Beispiele

Das untenstehende Beispiel fordert ein PNG-Bild mit fetch() an und verwendet die Methode Response.blob(), um ein neues ClipboardItem zu erstellen. Dieses Element wird dann mithilfe der Clipboard.write()-Methode in die Zwischenablage geschrieben.

Hinweis: Sie können jeweils nur ein Zwischenablageelement übergeben.

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

Siehe auch