AVISO:
Até a data, 31/12/2019, em que foi escrita essa resposta essa solução somente é compatível com os navegadores baseados no Chromium, Firefox e Opera. A resposta é baseada em tecnologia considerada até o momento recente e ainda não foi totalmente implementa entre os navegadores.
W3C | Clipboard API and events
Can I Use | Clipboard API: writeText
Webkit API Improvements | Clipboard API Improvements
Uma alternativa seria utilizar a API da Area de transferência para fazer a cópia das informações.
Sua documentação a descreve:
A API da área de transferência fornece a capacidade de responder aos
comandos da área de transferência (recortar, copiar e colar), além de
ler e gravar de forma assíncrona na área de transferência do sistema.
Esta API foi projetada para substituir o acesso à área de
transferência usando document.execCommand()
.
Essa API adiciona a interface Navigator
a propriedade de leitura clipboard
que retorna o objeto Clipboard
usado para ler e gravar o conteúdo na área de transferência.
Lembrando que:
O acesso ao conteúdo da área de transferência é bloqueado por trás da
API de permissões ; sem permissão do usuário, não é permitido ler ou
alterar o conteúdo na área de transferência.
Para gravar uma string na area de transferência usa-se o método writeText()
function copiar() {
let nome = document.getElementById('Nome').innerText;
let sobrenome = document.getElementById('Sobrenome').innerText;
navigator.clipboard.writeText(nome + " " + sobrenome)
.then(
function() {
console.log(" Os dados foram copiados.")
},
function() {
console.error("Houve um problema ao copiar os dados.")
});
}
<div>
<label>Nome:</label>
<span id="Nome">Augusto</span>
</div>
<div>
<label>Sobrenome:</label>
<span id="Sobrenome">Vasques</span>
</div>
<br>
<input type="button" onclick="copiar()" value="Copiar">