ClipboardItem.presentationStyle — Eigenschaft · JavaScript-Referenz

Signatur

get ClipboardItem.prototype.presentationStyle

Beschreibung

Die schreibgeschützte Eigenschaft presentationStyle eines ClipboardItem gibt als String an, wie die Zielanwendung den Inhalt beim Einfügen darstellen soll. Möglich sind folgende Werte:

"unspecified": Es gibt keine Vorgabe (Standardwert).
"inline": Der Inhalt soll direkt im Dokument erscheinen, zum Beispiel als eingebettetes Bild oder als Text.
"attachment": Der Inhalt soll als Anhang bzw. als Datei behandelt werden, etwa in einem E-Mail-Programm.

Der Wert wird beim Erzeugen des Objekts über die Option presentationStyle im zweiten Argument von new ClipboardItem(items, options) festgelegt. Danach lässt er sich nur noch lesen. Beim Auslesen der Zwischenablage mit navigator.clipboard.read() steht die Eigenschaft ebenfalls auf den gelieferten Einträgen zur Verfügung.

Die Angabe ist nur ein Hinweis an das Betriebssystem bzw. die Zielanwendung. Ob diese sich daran hält, ist nicht garantiert. In der Praxis wirkt sich der Wert vor allem bei Bildern und Dateien aus.

Rückgabewert

Typ

"unspecified" | "inline" | "attachment"

Beschreibung

Der beim Erzeugen festgelegte Darstellungshinweis. Standardwert ist "unspecified".

Beispiele

Standardwert eines neuen ClipboardItem prüfen

const item = new ClipboardItem({
  'text/plain': new Blob(['Hallo Welt'], { type: 'text/plain' })
});

console.log(item.presentationStyle);

unspecified

Bild als Anhang in die Zwischenablage schreiben

const copyImageAsAttachment = async (url) => {
  const response = await fetch(url);
  const blob = await response.blob(); // z. B. image/png

  const item = new ClipboardItem(
    { [blob.type]: blob },
    { presentationStyle: 'attachment' }
  );

  console.log('Darstellung:', item.presentationStyle);
  await navigator.clipboard.write([item]);
};

document.querySelector('#copy').addEventListener('click', () => {
  copyImageAsAttachment('/img/logo.png').catch(console.error);
});

Darstellung: attachment

Beim Einfügen den Darstellungshinweis auswerten (mit Feature-Erkennung)

const readClipboard = async () => {
  const items = await navigator.clipboard.read();

  for (const item of items) {
    const style = 'presentationStyle' in item
      ? item.presentationStyle
      : 'unspecified'; // Fallback, z. B. in Chromium

    console.log(`Typen: ${item.types.join(', ')} | Stil: ${style}`);

    if (style === 'attachment') {
      // z. B. als Datei-Anhang in der Oberfläche anzeigen
    }
  }
};

document.querySelector('#paste').addEventListener('click', () => {
  readClipboard().catch(console.error);
});

Typen: image/png | Stil: inline

// Wichtig · Fallstricke

Browser-Unterstützung: Die Eigenschaft gibt es derzeit in Safari und in Firefox (ab Version 127). Chromium-basierte Browser (Chrome, Edge, Opera) unterstützen sie bisher nicht, dort ist sie undefined und die Konstruktor-Option wird ignoriert. Prüfe deshalb vorher mit 'presentationStyle' in ClipboardItem.prototype, ob sie vorhanden ist.
Schreibgeschützt: Eine Zuweisung wie item.presentationStyle = 'inline' hat keine Wirkung (im Strict Mode wird ein TypeError ausgelöst). Den Wert kannst du nur im Konstruktor festlegen.
Ungültige Werte: Ein Wert außerhalb von "unspecified", "inline" und "attachment" in den Konstruktor-Optionen löst einen TypeError aus.
Nur ein Hinweis: Ob die Zielanwendung den Wert beachtet, hängt vom Betriebssystem und von der Anwendung ab.
Sicherer Kontext: Die Clipboard-API funktioniert nur über HTTPS bzw. auf localhost. Schreiben und Lesen setzt in der Regel eine Nutzeraktion oder eine Berechtigung voraus.

Siehe auch

ClipboardItem ClipboardItem.types ClipboardItem.prototype.getType() Clipboard.prototype.write() Clipboard.prototype.read() DelegatedInkTrailPresenter.presentationArea