ClipboardItem

ClipboardItem()

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

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".

ClipboardItem.supports()

Prüft, ob ein angegebener 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.

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.

In diesem Beispiel definieren wir zunächst zwei Konstanten mit Verweisen auf ein <p>-Element, das etwas Text enthält, und ein <button>-Element.

Als Nächstes definieren wir eine Funktion namens copyToClipboard(). Diese beginnt damit, einen "text/plain" MIME-Typ in einer Konstante zu speichern und 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 zu erstellen.

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

Schließlich fügen wir einen Ereignis-Listener zum <button> hinzu, damit 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);

Hier verwenden wir supports(), um zu überprüfen, ob der image/svg+xml MIME-Datentyp unterstützt wird. Falls dies der Fall ist, holen wir ein SVG-Bild mit der Fetch API und lesen es in ein Blob ein, das 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);
  }
}

Hier geben wir alle Elemente der Zwischenablage über die Methode clipboard.read() zurück. Danach verwenden wir die Eigenschaft ClipboardItem.types, um das Argument von getType() 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);
  }
}

• Clipboard API
• Bildunterstützung für asynchrone Zwischenablage-Artikel