ClipboardItem

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.

Die ClipboardItem-Schnittstelle der Clipboard API repräsentiert ein einzelnes Datenformat, das beim Lesen oder Schreiben von Zwischenablagedaten mit clipboard.read() und clipboard.write() verwendet wird.

Der Vorteil der ClipboardItem-Schnittstelle zur Darstellung von Daten besteht darin, dass Entwickler mit der unterschiedlichen Bandbreite von Dateitypen und Daten umgehen können.

Hinweis: Um mit Text zu arbeiten, siehe die Methoden Clipboard.readText() und Clipboard.writeText() der Clipboard-Schnittstelle.

Konstruktor

ClipboardItem()

Erstellt ein neues ClipboardItem-Objekt, mit dem MIME-Typ als Schlüssel und Blob als Wert.

Instanz-Eigenschaften

Diese Schnittstelle bietet die folgenden Eigenschaften.

types Schreibgeschützt

Gibt ein Array von MIME-Typen zurück, die im ClipboardItem verfügbar sind.

presentationStyle Schreibgeschützt

Gibt einen der folgenden Werte zurück: "unspecified", "inline" oder "attachment".

Statische Methoden

Diese Schnittstelle definiert die folgenden Methoden.

ClipboardItem.supports()

Prüft, ob ein gegebener MIME-Typ von der Zwischenablage unterstützt wird. Dies ermöglicht es einer Website zu erkennen, ob ein MIME-Typ von der Zwischenablage unterstützt wird, bevor versucht wird, Daten zu schreiben.

Instanz-Methoden

Diese Schnittstelle definiert die folgenden Methoden.

getType()

Gibt ein Promise zurück, das mit einem Blob des angeforderten MIME-Typs aufgelöst wird, oder einen Fehler, wenn der MIME-Typ nicht gefunden wird.

Beispiele

Schreiben in die Zwischenablage

Hier verwenden wir supports(), um zu überprüfen, ob der MIME-Datentyp image/svg+xml unterstützt wird. Wenn ja, laden wir das Bild mit der "Fetch API" herunter und lesen es in ein Blob ein, mit dem wir ein ClipboardItem erstellen können, das in die Zwischenablage geschrieben wird.

js
async function writeClipImg() {
  try {
    if (ClipboardItem.supports("image/svg+xml")) {
      const imgURL = "/my-image.svg";
      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("SVG images are not supported by the clipboard.");
    }
  } catch (err) {
    console.error(err.name, err.message);
  }
}

Lesen aus der Zwischenablage

Hier geben wir alle Elemente auf der Zwischenablage über die Methode clipboard.read() zurück. Dann verwenden wir die Eigenschaft ClipboardItem.types, um das Argument für getType() festzulegen und das entsprechende Blob-Objekt zurückzugeben.

js
async function getClipboardContents() {
  try {
    const clipboardItems = await navigator.clipboard.read();

    for (const clipboardItem of clipboardItems) {
      for (const type of clipboardItem.types) {
        const blob = await clipboardItem.getType(type);
        // we can now use blob here
      }
    }
  } catch (err) {
    console.error(err.name, err.message);
  }
}

Spezifikationen

Specification
Clipboard API and events
# clipboarditem

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch