ClipboardItem

Konstruktor

ClipboardItem()

Erstellt ein neues ClipboardItem Objekt, wobei der MIME-Typ als Schlüssel und die Daten als Wert fungieren.

Instanz-Eigenschaften

types Schreibgeschützt

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

presentationStyle Schreibgeschützt

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

Statische Methoden

ClipboardItem.supports()

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

Instanz-Methoden

getType()

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

Beispiele

Schreiben von Text in die Zwischenablage

In diesem Beispiel definieren wir zunächst zwei Konstanten, die Verweise auf ein <p>-Element mit etwas Text und ein <button>-Element enthalten.

Als Nächstes definieren wir eine Funktion namens copyToClipboard(). Diese beginnt damit, einen "text/plain" MIME-Typ in einer Konstante zu speichern, dann ein Objekt namens clipboardItemData zu erstellen, das eine Eigenschaft mit einem Schlüssel gleich dem MIME-Typ und einem Wert des Textes enthält, den wir in die Zwischenablage kopieren möchten (in diesem Fall der Inhalt des <p> Elements). Da wir mit Text arbeiten, können wir ihn direkt übergeben, anstatt einen Blob erstellen zu müssen.

Wir erstellen ein neues ClipboardItem Objekt mit dem ClipboardItem() Konstruktor und übergeben es der Clipboard.write() Methode, um den Text in die Zwischenablage zu kopieren.

Zum Schluss fügen wir dem <button> einen Event-Listener hinzu, sodass die Funktion beim Drücken ausgeführt wird.

const textSource = document.querySelector("p");
const copyBtn = document.querySelector("button");

async function copyToClipboard() {
  const type = "text/plain";
  const clipboardItemData = {
    [type]: textSource.textContent,
  };
  const clipboardItem = new ClipboardItem(clipboardItemData);
  await navigator.clipboard.write([clipboardItem]);
}

copyBtn.addEventListener("click", copyToClipboard);

Schreiben eines Bildes in die Zwischenablage

Hier verwenden wir supports(), um zu überprüfen, ob der image/svg+xml MIME-Datentyp unterstützt wird. Falls ja, holen wir ein SVG-Bild mit der Fetch API und legen es dann in einem Blob ab, den wir verwenden können, um ein ClipboardItem zu erstellen, das in die Zwischenablage geschrieben wird.

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 von der Zwischenablage

Hier geben wir alle Elemente in der Zwischenablage über die clipboard.read() Methode zurück. Anschließend nutzen wir die ClipboardItem.types Eigenschaft, um das getType() Argument festzulegen und das entsprechende Blob-Objekt zurückzugeben.

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

Browser-Kompatibilität

Siehe auch

• ClipboardChangeEvent
• Clipboard API
• Image support for Async Clipboard article