Como copiar textos HTML formatados e imagens para a Área de Transferência usando JavaScript

Por: Angelo Luis Ferreira | 11/07/2025 Acessos: 82

Objetivo

Neste tutorial avançado, vamos mostrar como utilizar a Clipboard API do JavaScript para copiar conteúdo rico — como texto HTML formatado e imagens — diretamente para a área de transferência do usuário. Vamos explorar exemplos práticos com explicações detalhadas, cobrindo desde o uso básico até casos reais como copiar HTML estilizado ou imagens geradas via <canvas>.

Você aprenderá a:

• Criar e copiar conteúdo HTML formatado (como <b>, <i>, <span>, etc)

• Copiar imagens dinâmicas geradas via canvas

• Usar a API Clipboard de forma segura e compatível com navegadores modernos

• Tratar permissões e erros corretamente

Definições

Web API ou API moderna do JavaScript

A API moderna do JavaScript (ou Web API) é um conjunto de interfaces nativas oferecidas pelos navegadores modernos que permite interações avançadas com o sistema, dispositivos e navegador de forma segura e controlada.

Ela inclui recursos como:

• 📋 Clipboard API — copiar e colar conteúdos

• 📷 MediaDevices API — acessar câmera e microfone

• 🗂️ Fetch API — fazer requisições HTTP assíncronas

• 💾 LocalStorage e IndexedDB — armazenar dados no navegador

• 🔔 Notification API — enviar notificações push

Essas APIs tornam possível criar aplicações web cada vez mais interativas e completas, sem depender de plugins externos.

Blob (Binary Large Object)

Blob (Binary Large Object) é um tipo de objeto no JavaScript que representa dados binários brutos, como arquivos de imagem, áudio, vídeo ou até trechos de texto estruturado (como HTML), encapsulados com um tipo MIME definido (ex: "image/png", "text/html", "application/pdf").

Ele é muito usado para criar arquivos dinamicamente, enviar dados ou copiar conteúdo para a área de transferência.

Exemplo simples:

const html = "<p><strong>Texto formatado</strong></p>";
const blob = new Blob([html], { type: "text/html" });

Esse blob agora pode ser tratado como se fosse um arquivo HTML — útil para copiar, baixar ou enviar.

Clipboard API

A Clipboard API do JavaScript é uma interface moderna e segura que permite aos sites ler e escrever diretamente na área de transferência do usuário — ou seja, copiar e colar dados — com consentimento e sob certas restrições.

Com ela, podemos copiar:

• Texto simples (Leia Como copiar textos para a Área de Transferência usando JavaScript)

• Texto HTML formatado

• Arquivos (como imagens PNG, JPEG, PDF, etc.)

Requisitos de Segurança

Para funcionar corretamente, a Clipboard API exige:

• Contexto seguro (HTTPS ou localhost)

• Interação explícita do usuário (como clicar em um botão)

• Permissões concedidas para leitura ou escrita (alguns navegadores pedem)

Copiando e colando texto simples (recapitulando)

📋 1. Copiar texto

Usa navigator.clipboard.writeText()

navigator.clipboard.writeText('Olá, mundo!')
  .then(() => console.log('Texto copiado!'))
  .catch(err => console.error('Erro ao copiar:', err));

📥 2. Colar texto

Usa navigator.clipboard.readText()

navigator.clipboard.readText()
  .then(texto => console.log('Texto colado:', texto))
  .catch(err => console.error('Erro ao colar:', err));

Dicas de uso

• Sempre envolva o acesso à área de transferência em eventos do usuário (como onclick).

• Use try/catch ou .catch() para lidar com erros.

• Mostre feedback visual ao usuário (ex. “Texto copiado!”).

Para saber mais sobre como copiar e colar textos simples na área de transferência leia: Como copiar textos para a Área de Transferência usando JavaScript

Copiando HTML formatado (avançado)

Neste exemplo, estamos copiando conteúdo com formatação HTML real — como <strong>, <em>, <span style="color:...">, etc. — para a área de transferência, usando a API moderna do JavaScript.

Isso é útil quando você quer que o conteúdo colado mantenha cores, links e estilos ao ser colado em e-mails, Google Docs, Word ou qualquer editor com suporte a HTML.

<button onclick="copiarHTML()">Copiar HTML</button>

<script>
  function copiarHTML() {
    // HTML que será copiado, com formatação
    const html = `
      <p>
        <strong style="color: blue;">Texto em negrito azul</strong>
        com <em>itálico</em> e um <a href='https://exemplo.com'>link</a>.
      </p>
    `;

    // Criamos um Blob (objeto binário) com tipo text/html
    const blob = new Blob([html], { type: "text/html" });

    // Criamos um ClipboardItem usando esse blob
    const item = new ClipboardItem({ "text/html": blob });

    // Usamos navigator.clipboard.write() para copiar esse conteúdo
    navigator.clipboard.write([item])
      .then(() => alert("HTML copiado!"))
      .catch(err => alert("Erro ao copiar: " + err));
  }
</script>

Veja o resultado do exemplo no Squids Editor: Abrir SQUIDS EDITOR.

Explicando passo a passo:

1. Definimos uma string com HTML formatado, usando o "Template String" do JavaScript.

2. Criamos um Blob com esse HTML, e dizemos que seu tipo é "text/html".

3. Esse Blob é passado para um ClipboardItem, que permite copiar dados do tipo correto.

4. Usamos navigator.clipboard.write() para gravar esse item na área de transferência.

5. Quando você cola (Ctrl+V) em editores compatíveis, o conteúdo é colado formatado. Você poderá usar o Word para testar.

Copiando uma imagem gerada com <canvas>

Neste exemplo, criamos uma imagem dinamicamente usando um <canvas> — por exemplo, uma assinatura digital, avatar ou QR Code — e a copiamos como imagem real (PNG) para a área de transferência.

Ao colar (Ctrl+V), a imagem aparecerá onde houver suporte (Paint, Photoshop, Google Docs, Word, etc).

<canvas id="meuCanvas" width="300" height="150" style="border:1px solid #ccc;"></canvas>
<br><br>
<button onclick="copiarImagem()">Copiar Imagem</button>

<script>
  // Pega o contexto do canvas para desenhar
  const canvas = document.getElementById('meuCanvas');
  const ctx = canvas.getContext('2d');

  // Desenha fundo colorido e texto
  ctx.fillStyle = "#009688";               // Cor de fundo
  ctx.fillRect(0, 0, canvas.width, canvas.height); // Preenche fundo

  ctx.fillStyle = "#fff";                  // Cor do texto
  ctx.font = "20px sans-serif";
  ctx.fillText("Imagem canvas!", 60, 80); // Texto central

  // Função de copiar imagem
  async function copiarImagem() {
    try {
      // Converte o canvas em Blob (PNG)
      const blob = await new Promise(resolve =>
        canvas.toBlob(resolve, 'image/png')
      );

      // Cria ClipboardItem com o tipo 'image/png'
      const item = new ClipboardItem({ "image/png": blob });

      // Copia a imagem para a área de transferência
      await navigator.clipboard.write([item]);

      alert("Imagem copiada!");
    } catch (err) {
      alert("Erro ao copiar imagem: " + err);
    }
  }
</script>

Veja o resultado do exemplo no Squids Editor: Abrir SQUIDS EDITOR.

Explicando passo a passo:

1. Usamos JavaScript para desenhar no canvas (cor de fundo + texto).

2. Usamos canvas.toBlob() para transformar o conteúdo em imagem PNG.

3. Criamos um ClipboardItem com o Blob e o tipo "image/png".

4. Enviamos para a área de transferência com navigator.clipboard.write().

5. O usuário pode colar a imagem onde quiser (como se tivesse feito um print de tela).

✅ Funciona para gerar gráficos, assinaturas, avatares, thumbnails, QR codes, etc.

Exemplos práticos de uso da API para textos HTML e Imagens

Exemplo 1: Copiar uma assinatura em HTML formatado

Ideal para sistemas de e-mail, blogs ou ferramentas de assinatura digital.

💡 Colar no Gmail ou Google Docs preservará a formatação e links.

<div id="assinatura">
  <p>
    <strong style="font-size:16px; color:#2e7d32;">João da Silva</strong><br>
    <span style="color:gray;">Desenvolvedor Front-End</span><br>
    <a href="https://meusite.dev" style="color:#1565c0;">meusite.dev</a>
  </p>
</div>

<button onclick="copiarAssinatura()">Copiar Assinatura</button>

<script>
  function copiarAssinatura() {
    const html = document.getElementById('assinatura').innerHTML;
    const blob = new Blob([html], { type: "text/html" });
    const item = new ClipboardItem({ "text/html": blob });

    navigator.clipboard.write([item])
      .then(() => alert("Assinatura copiada!"))
      .catch(err => alert("Erro ao copiar: " + err));
  }
</script>

Veja o resultado do exemplo no Squids Editor: Abrir SQUIDS EDITOR.

Exemplo 2: Copiar imagem de um canvas personalizado

Útil para apps de desenho, assinatura digital ou geração de QR code.

💡 Você pode colar a imagem no Paint, Photoshop, Google Docs, Word, etc.

<canvas id="canvasAssinatura" width="300" height="120" style="border:1px solid #aaa;"></canvas><br>
<button onclick="copiarCanvas()">Copiar Imagem</button>

<script>
  const canvas = document.getElementById('canvasAssinatura');
  const ctx = canvas.getContext('2d');

  ctx.fillStyle = "#004d40";
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = "#fff";
  ctx.font = "20px cursive";
  ctx.fillText("João da Silva", 50, 70);

  async function copiarCanvas() {
    const blob = await new Promise(resolve => canvas.toBlob(resolve, 'image/png'));
    const item = new ClipboardItem({ "image/png": blob });

    navigator.clipboard.write([item])
      .then(() => alert("Imagem copiada!"))
      .catch(err => alert("Erro ao copiar imagem: " + err));
  }
</script>

Veja o resultado do exemplo no Squids Editor: Abrir SQUIDS EDITOR.

Exemplo 3: Copiar conteúdo HTML com emojis, listas e estilos

Ideal para ferramentas de “copiar conteúdo formatado”.

💡 Ao colar em uma página de email, Word ou editor rich-text, a estrutura será mantida.

<div id="bloco-html">
  <h3 style="color:#e65100;">🔥 Destaques:</h3>
  <ul>
    <li><strong>Velocidade</strong> e desempenho</li>
    <li>📦 Empacotamento inteligente</li>
    <li>📋 Copiar HTML com <code>Clipboard API</code></li>
  </ul>
</div>

<button onclick="copiarBloco()">Copiar Bloco HTML</button>

<script>
  function copiarBloco() {
    const html = document.getElementById('bloco-html').innerHTML;
    const blob = new Blob([html], { type: "text/html" });
    const item = new ClipboardItem({ "text/html": blob });

    navigator.clipboard.write([item])
      .then(() => alert("Bloco copiado!"))
      .catch(err => alert("Erro ao copiar HTML: " + err));
  }
</script>

Exemplo 4: Copiar e colar texto formatado com HTML

Simula um editor com copiar/colar formatado.

💡 Esse exemplo simula copiar/colar com HTML real entre áreas da sua própria página — ideal para editores visuais.

<div id="editor" contenteditable="true" style="border:1px solid #ccc; padding:1rem;">
  <p><strong>Texto de exemplo</strong> com <em>itálico</em> e <span style="color:red;">vermelho</span>.</p>
</div>

<button onclick="copiarEditor()">Copiar</button>
<button onclick="colarEditor()">Colar</button>

<script>
  function copiarEditor() {
    const html = document.getElementById('editor').innerHTML;
    const blob = new Blob([html], { type: "text/html" });
    const item = new ClipboardItem({ "text/html": blob });

    navigator.clipboard.write([item])
      .then(() => alert("Conteúdo copiado!"))
      .catch(err => alert("Erro: " + err));
  }

  async function colarEditor() {
    try {
      const clipboardItems = await navigator.clipboard.read();
      for (const item of clipboardItems) {
        if (item.types.includes('text/html')) {
          const blob = await item.getType('text/html');
          const html = await blob.text();
          document.getElementById('editor').innerHTML = html;
        }
      }
    } catch (err) {
      alert("Erro ao colar: " + err);
    }
  }
</script>

Veja o resultado do exemplo no Squids Editor: Abrir SQUIDS EDITOR.

REFERÊNCIA JAVASCRIPT

1. [Clipboard: writeText() method] >> Método Clipboard: writeText() - MDN Web Docs.

2. [Clipboard: readText() method] >> Médodo Clipboard: readText()  - MDN Web Docs.

3. [Clipboard API] » Clipboard API - MDN Web Docs.

4. [Blob JavaScript] » Blob - MDN Web Docs.