Três maneiras de copiar o conteúdo da página com JavaScript (compartilhamento de resumo)

Existem muitos plug-ins de terceiros que podem implementar a função de cópia, mas se fizermos isso sozinhos, saberemos como implementá-la?

Este artigo apresenta três opções de implementação.

Método 1: API Async Clipboard

usando API Async Clipboard

Este método é o mais fácil de usar, mas a compatibilidade não é muito boa e há muitos requisitos.

Código de exemplo:

const promessa = navigator.clipboard.writeText(newClipText);

Observe que o valor de retorno do método é uma promessa. E ao usar este método, a página deve estar em foco, caso contrário será relatado um erro.

Método 2: API Document.execCommand

usa Document.execCommand

Embora este método tenha sido abandonado e não seja mais um padrão da web, ele tem muitos fatores históricos e acredito que os navegadores irão suportá-lo por muito tempo.

Copie o conteúdo do elemento DOM

<p id="content">123456</p>
<button id="copyButton">Copiar</button>

Ao copiar elementos DOM, você precisa usar a API de seleção e a API de intervalo adicionalmente.

developer.mozilla.org/en-US/docs/…

developer.mozilla.org/en-US/docs/…

Código de exemplo:

const copyButton = document.getElementById('copyButton');
const conteúdo = document.getElementById('conteúdo');
copyButton.addEventListener('clique', function() {
  seleção const = window.getSelection();
  intervalo const = document.createRange();
  //Definir o conteúdo selecionado range.selectNodeContents(content);
  // Limpa a seleção selection.removeAllRanges();
  //Adiciona conteúdo selecionado selection.addRange(range);
  document.execCommand('copiar');
});

A seleção precisa ser limpa primeiro e depois o intervalo é adicionado.

Há um problema de detalhe aqui. Depois de clicar no botão copiar, o conteúdo copiado é selecionado, o que é um pouco abrupto.

A solução é chamar selection.removeAllRanges() após a conclusão da cópia para limpar a seleção.

Considere outra situação em que o usuário seleciona parte da página antes de copiá-la. Após a conclusão da cópia, além de limpar o conteúdo da cópia selecionado, você também precisa restaurar o conteúdo que o usuário selecionou antes de copiar.

O código de implementação é o seguinte:

const copyButton = document.getElementById('copyButton');
const conteúdo = document.getElementById('conteúdo');
copyButton.addEventListener('clique', function() {
  seleção const = window.getSelection();
  intervalo const = document.createRange();
  //Armazena em cache o conteúdo selecionado pelo usuário const currentRange =
    seleção.rangeCount === 0? nulo: seleção.getRangeAt(0);
  //Definir fragmento do documento range.selectNodeContents(content);
  // Limpa a seleção selection.removeAllRanges();
  //Define o fragmento do documento como o conteúdo selecionado selection.addRange(range);
  tentar {
    // Copiar para a área de transferência document.execCommand('copy');
  } pegar (errar) {
    // Avisa que a cópia falhou} finalmente {
    seleção.removeAllRanges();
    if (intervaloatual) {
      //Restaura o conteúdo selecionado pelo usuário selection.addRange(currentRange);
    }
  }
});

Primeiro armazene em cache o conteúdo selecionado pelo usuário e restaure-o após a conclusão da cópia.

Copie o conteúdo do elemento de entrada

e use o método select do objeto do elemento de entrada para selecionar o conteúdo. Não há necessidade de criar um fragmento de intervalo para definir o conteúdo selecionado.

Código de exemplo:

const copyButton = document.getElementById('copyButton');
const inputEl = document.getElementById('input');
copyButton.addEventListener('clique', function() {
  seleção const = window.getSelection();
  const intervalo atual =
    seleção.rangeCount === 0? nulo: seleção.getRangeAt(0);
  //Selecione o conteúdo de entrada inputEl.select();
  //Copia para a área de transferência try {
    document.execCommand('copiar');
  } pegar (errar) {
    // Avisa que a cópia falhou // . . .
  } finalmente {
    seleção.removeAllRanges();
    if (intervaloatual) {
      //Restaura o conteúdo selecionado pelo usuário selection.addRange(currentRange);
    }
  }
});

Clicar no botão copiar também não removerá o conteúdo selecionado anteriormente.

Método 3: Substitua o evento de cópia

w3c.github.io/clipboard-a…

Cite um trecho de código no link acima como exemplo:

// Substitua o que está sendo copiado para a área de transferência.
document.addEventListener('copiar', função (e) {
  // e.clipboardData está inicialmente vazio, mas podemos configurá-lo para o
  // dados que queremos copiar para a área de transferência.
  e.clipboardData.setData('text/plain', 'Ovos mexidos ocidentais');
  // Isto é necessário para evitar que a seleção do documento atual seja
  // sendo gravado na área de transferência.
  e.preventDefault();
});

Copie qualquer conteúdo da página e cole o conteúdo de saída será "Ovos mexidos ocidentais".