Use o método Clipboard.write()
e adicione um Blob
, um exemplo HTML:
const valor = ...;
new Blob([ valor ], { type: 'text/html' });
Se o conteúdo for uma imagem PNG:
const valor = ...;
new Blob([ valor ], { type: 'image/png' });
Então depois de obter ou gerar o blob
, você deve adiciona-lo usando ClipboardItem
.
Exemplo para copiar um HTML:
<script type="text/javascript">
function copyHTML(html)
{
const type = 'text/html'; // Define HTML
const blob = new Blob([html], { type }); // Cria o blob
const item = new ClipboardItem({ [type]: blob });
navigator.clipboard.write(item).then(() => {
console.log('Copiado');
}, (err) => {
console.error(err);
});
}
</script>
<button onclick="copyHTML('<strong>negrito</strong><i>italico</i>')">
Copiar
</button>
<button onclick="copyHTML('<u>sublinhado</u> normal')">
Copiar
</button>
<blockquote contenteditable="true">
<p>Cole aqui....</p>
</blockquote>
Se deseja copiar o HTML de um elemento use o Element.innerHTML
// Copia o conteudo HTML de um elemento
const html = document.getElementById('foobar').innerHTML;
const type = 'text/html';
const blob = new Blob([html], { type });
const item = new ClipboardItem({ [type]: blob });
navigator.clipboard.write([item]);
Se for o elemento inteiro use Element.outerHTML
:
// Copia o conteudo HTML de um elemento
const html = document.getElementById('foobar').outerHTML;
const type = 'text/html';
const blob = new Blob([html], { type });
const item = new ClipboardItem({ [type]: blob });
navigator.clipboard.write([item]);
Limitações do Clipboard.write
O método Clipboard.write
aceitará diferentes tipos de conteúdo, mas isso varia de navegador para navegador. Em navegadores baseados em Chromium, o formatos suportados são: text/plain
, text/html
e image/png
, outros formatos irão lançar exception semelhante a essa:
DOMException: Type image/jpeg not supported on write.
Para ilustrar um exemplo, que funcione, de uma imagem PNG vinda de uma requisição via API fetch
:
fetch('https://foo.bar/baz.png')
.then((response) => response.blob())
.then((blob) => {
const type = 'image/png';
const item = new ClipboardItem({ [type]: blob });
navigator.clipboard.write([item]);
});
Ou até gerada por <canvas>
com o método com o método HTMLCanvasElement.toBlob(callback, type, quality)
para gerar o blob
, exemplo:
<canvas id="canvas"></canvas>
<button onclick="copyImageFromCanvas()">
Copiar image
</button>
<blockquote contenteditable="true">
<p>Cole aqui....</p>
</blockquote>
<canvas id="foobar"></canvas>
<script type="text/javascript">
function copyImageFromCanvas()
{
const type = 'image/png'; // Define o tipo da imagem
const canvas = document.getElementById('foobar');
canvas.toBlob((blob) => {
const item = new ClipboardItem({ [type]: blob });
navigator.clipboard.write([item]);
}, type);
}
const canvas = document.getElementById('foobar');
const ctx = canvas.getContext('2d');
ctx.rect(20, 20, 100, 100);
ctx.stroke();
</script>