Angular/Typescript kopiera en bild (blob) till urklipp programmässigt

I en Angular 7-applikation använder vi html-to-image för att rendera ett HTML-block till en png, och vi sparar den bilden med file-saver.

    htmlToImage.toBlob(element).then(function (blob) {
      saveAs(blob, `image.png`);
    });

Detta fungerar bra, men affärskravet är att lägga den bilden i urklippet så att den kan klistras in i ett annat verktyg (Word, Excel...).

Har gjort lite googlande om Async Clipboard API, men det verkar som att API:et inte stöds av alla webbläsare än.

Finns det någon lösning för att få detta att fungera utan att förlita sig på Clipboard API?

Svar #1

Ditt bästa alternativ är verkligen Async Clipboard API, som nu har växande webbläsarstöd. Artikeln har ett exempel som visar exakt hur man använder det:

try {
  const imgURL = '/images/generic/file.png';
  const data = await fetch(imgURL);
  const blob = await data.blob();
  await navigator.clipboard.write([
    new ClipboardItem({
      [blob.type]: blob
    })
  ]);
  console.log('Image copied.');
} catch (err) {
  console.error(err.name, err.message);
}