ClipboardItem.getType() — Methode · JavaScript-Referenz

Signatur

ClipboardItem.prototype.getType(type)

Beschreibung

Mit getType() liest du die eigentlichen Daten aus einem ClipboardItem aus. Ein solches Objekt bekommst du meistens über navigator.clipboard.read(). Weil ein Eintrag in der Zwischenablage gleichzeitig in mehreren Formaten vorliegen kann (z. B. text/plain und text/html), gibst du beim Aufruf den gewünschten MIME-Typ an und bekommst die passenden Daten als Blob zurück.

Welche Formate ein Eintrag enthält, steht in der Eigenschaft ClipboardItem.types. Am besten prüfst du diese Liste vor dem Aufruf. Fragst du einen Typ an, der nicht vorhanden ist, wird das Promise mit einer DOMException vom Typ NotFoundError abgelehnt.

Den zurückgegebenen Blob verarbeitest du dann je nach Inhalt weiter: mit blob.text() für Text und HTML oder mit URL.createObjectURL(blob) bzw. createImageBitmap(blob) für Bilder wie image/png.

Parameter

Name	Typ	Default	Beschreibung
$type Pflicht	string		Der gewünschte MIME-Typ, z. B. `"text/plain"`, `"text/html"` oder `"image/png"`. Er muss in `ClipboardItem.types` enthalten sein.

Rückgabewert

Typ

Promise<Blob>

Beschreibung

Ein Promise, das mit einem Blob der Daten im angeforderten Format erfüllt wird. Ist der Typ nicht vorhanden, wird es mit einer DOMException (NotFoundError) abgelehnt.

Beispiele

Text aus der Zwischenablage lesen

const pasteText = async () => {
  const items = await navigator.clipboard.read();
  for (const item of items) {
    if (item.types.includes('text/plain')) {
      const blob = await item.getType('text/plain');
      const text = await blob.text();
      console.log('Eingefügt:', text);
    }
  }
};

document.querySelector('#paste').addEventListener('click', pasteText);

Eingefügt: Hallo Welt

Bild einfügen und anzeigen

const pasteImage = async () => {
  try {
    const items = await navigator.clipboard.read();
    for (const item of items) {
      const imageType = item.types.find((t) => t.startsWith('image/'));
      if (!imageType) continue;
      const blob = await item.getType(imageType);
      const img = document.createElement('img');
      img.src = URL.createObjectURL(blob);
      img.onload = () => URL.revokeObjectURL(img.src);
      document.body.append(img);
      console.log(`Bild eingefügt (${imageType}, ${blob.size} Bytes)`);
      return;
    }
    console.log('Kein Bild in der Zwischenablage.');
  } catch (err) {
    console.error('Lesen fehlgeschlagen:', err.name);
  }
};

document.querySelector('#paste-image').addEventListener('click', pasteImage);

Bild eingefügt (image/png, 48213 Bytes)

HTML bevorzugen, auf Text zurückfallen

const readRich = async () => {
  const [item] = await navigator.clipboard.read();
  const type = ['text/html', 'text/plain'].find((t) => item.types.includes(t));
  if (!type) return null;
  const content = await (await item.getType(type)).text();
  return { type, content };
};

readRich().then(console.log);

{ type: 'text/html', content: '<b>Fett</b>' }

NotFoundError abfangen

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

try {
  await item.getType('image/png');
} catch (err) {
  console.log(err.name);
}

NotFoundError

// Wichtig · Fallstricke

Nur im sicheren Kontext: Die Async Clipboard API gibt es nur unter HTTPS oder localhost.
Berechtigungen: navigator.clipboard.read() braucht in der Regel eine Nutzeraktion wie einen Klick. Chromium fragt zusätzlich die Berechtigung clipboard-read ab, Safari und Firefox zeigen stattdessen ein kleines „Einfügen“-Menü. Ohne Zustimmung wird das Promise mit NotAllowedError abgelehnt.
Vorher types prüfen: Ein fehlender Typ führt zu NotFoundError. Frag deshalb nur Typen ab, die in item.types stehen.
Unterstützte Formate: Browser garantieren nur text/plain, text/html und image/png. Eigene Formate mit dem Präfix web (z. B. \"web text/custom\") funktionieren nur in Chromium.
Sicherheit: Eingefügtes text/html kann Schadcode enthalten. Setze es nie ungeprüft per innerHTML ein, sondern bereinige es vorher (z. B. mit DOMPurify oder der Sanitizer-API), sonst droht XSS.
Speicher: Object-URLs, die du mit URL.createObjectURL() erzeugst, solltest du mit URL.revokeObjectURL() wieder freigeben.
Firefox: clipboard.read() und ClipboardItem werden erst ab Version 127 ohne Einstellungs-Flag unterstützt.

Siehe auch

ClipboardItem ClipboardItem.types Clipboard.read() Clipboard.write() Clipboard.readText() Blob Blob.text() URL.createObjectURL()