-1

Tenho uma aplicação que salva textos para área de transferência ao apertar um botão. Gostaria de saber se é possível que esse texto vá para área de transferência já com formatação, semelhante ao copiar um texto já formatado no Word. De preferência usando apenas javascript puro. Desde já, agradeço!

Abaixo está a função que estou usando, sendo "gentTXT" um input com o texto a ser copiado.

function copiar() {

    navigator.clipboard.writeText(genTXT.value)
        .then(() => {
        console.log("Text copied to clipboard...")
    })
        .catch(err => {
        console.log('Something went wrong', err);
    })
}

1 Resposta 1

2

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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .