Solución:
La interacción del usuario es obligatoria para ejecutar document.execCommand
, que se utiliza para copiar texto al portapapeles.
Vea mi otra respuesta.
Si no desea utilizar ninguna biblioteca de terceros, puede utilizar el siguiente fragmento para copiar texto en el portapapeles.
function copyTextToClipboard(text) {
var txtArea = document.createElement("textarea");
txtArea.id = 'txt';
txtArea.style.position = 'fixed';
txtArea.style.top = '0';
txtArea.style.left="0";
txtArea.style.opacity = '0';
txtArea.value = text;
document.body.appendChild(txtArea);
txtArea.select();
try {
var successful = document.execCommand('copy');
var msg = successful ? 'successful' : 'unsuccessful';
console.log('Copying text command was ' + msg);
if (successful) {
return true;
}
} catch (err) {
console.log('Oops, unable to copy');
} finally {
document.body.removeChild(txtArea);
}
return false;
}
Cambio copyToClipboard
funciona como se muestra a continuación para llamar a la función copyTextToClipboard
copyToClipboard() {
this.textToCopy = this.text1 + this.text2 + this.text3;
var result = this.copyTextToClipboard(this.textToCopy);
if (result) {
this.toastr.info('Copied to Clipboard');
}
}
Necesitas usar ngxClipboard
directiva con su imagen. Así es como debe usarlo para resolver su problema:
<td>
<img src="https://foroayuda.es/./assets/Copy.gif" (click)="copyToClipboard()" ngxClipboard [cbContent]="textToCopy" />
</td>
Recuerda agregar ClipboardModule
en el módulo de tu aplicación. Código de ejemplo a continuación:
import { ClipboardModule } from 'ngx-clipboard';
@NgModule({
imports: [
// Other Imports
ClipboardModule
],
// Other code
})
export class AppModule { }
Esta es la forma más sencilla de copiar al portapapeles.
En tu plantilla
<button (click)="copyToClipboard(sharableLink)">Copy link</button>
<input type="text" value="This is the value to copy" #sharableLink>
En componente
copyToClipboard(element) {
element.select();
document.execCommand('copy');
this.toaster('success', 'Success!', 'Link copied to clipboard.');
}
¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)