Angular 5 - Copier dans le presse-papiers

Question

Je suis en train d'essayer d'implémenter une icône qui, une fois cliquée, enregistrera une variable dans le presse-papiers de l'utilisateur. J'ai actuellement essayé plusieurs bibliothèques et aucune d'entre elles n'a été capable de le faire.

Comment puis-je copier correctement une variable dans le presse-papiers de l'utilisateur en Angular 5?

Answer 1

Solution 1: Copiez n'importe quel texte

HTML

Copier cela

Fichier .ts

copyMessage(val: string){
    const selBox = document.createElement('textarea');
    selBox.style.position = 'fixed';
    selBox.style.left = '0';
    selBox.style.top = '0';
    selBox.style.opacity = '0';
    selBox.value = val;
    document.body.appendChild(selBox);
    selBox.focus();
    selBox.select();
    document.execCommand('copy');
    document.body.removeChild(selBox);
  }

---

Solution 2: Copiez à partir d'une zone de texte

HTML

      Copier depuis la zone de texte

Fichier .ts

    /* Pour copier du texte depuis la zone de texte */
  copyInputMessage(inputElement){
    inputElement.select();
    document.execCommand('copy');
    inputElement.setSelectionRange(0, 0);
  }

Démo ici

---

Solution 3: Importez une directive tierce ngx-clipboard

copier

---

Solution 4: Directive personnalisée

Si vous préférez utiliser une directive personnalisée, consultez la réponse de Dan Dohotaru qui est une solution élégante implémentée en utilisant ClipboardEvent.

---

Solution 5: Angular Material

Les utilisateurs d'Angular Material 9+ peuvent utiliser la fonction de copie intégrée pour copier du texte. Il existe quelques autres personnalisation disponibles telles que limiter le nombre de tentatives pour copier des données.

Answer 2

Je sais que cela a déjà été largement voté ici à présent, mais je préfère adopter une approche de directive personnalisée et me fier à l'événement ClipboardEvent comme @jockeisorby l'a suggéré, tout en veillant à ce que l'écouteur soit correctement supprimé (la même fonction doit être fournie pour les événements d'ajout et de suppression)

stackblitz démonstration

import { Directive, Input, Output, EventEmitter, HostListener } from "@angular/core";

@Directive({ selector: '[copy-clipboard]' })
export class CopyClipboardDirective {

  @Input("copy-clipboard")
  public payload: string;

  @Output("copied")
  public copied: EventEmitter = new EventEmitter();

  @HostListener("click", ["$event"])
  public onClick(event: MouseEvent): void {

    event.preventDefault();
    if (!this.payload)
      return;

    let listener = (e: ClipboardEvent) => {
      let clipboard = e.clipboardData || window["clipboardData"];
      clipboard.setData("text", this.payload.toString());
      e.preventDefault();

      this.copied.emit(this.payload);
    };

    document.addEventListener("copy", listener, false)
    document.execCommand("copy");
    document.removeEventListener("copy", listener, false);
  }
}

et ensuite l'utiliser de la sorte

  Copier

public notify(payload: string) {
   // Vous voudrez peut-être informer l'utilisateur qu'un élément a été copié dans le presse-papiers
   console.info(`'${payload}' a été copié dans le presse-papiers`);
}

Note : remarquez que window["clipboardData"] est nécessaire pour IE car il ne comprend pas e.clipboardData

Answer 3

Je pense que c'est une solution beaucoup plus propre lors de la copie du texte :

copyToClipboard(item) {
    document.addEventListener('copy', (e: ClipboardEvent) => {
      e.clipboardData.setData('text/plain', (item));
      e.preventDefault();
      document.removeEventListener('copy', null);
    });
    document.execCommand('copy');
  }

Et ensuite il suffit d'appeler copyToClipboard sur l'événement de clic en html. (click)="copyToClipboard('texttocopy')".

Answer 4

Version modifiée de la réponse de jockeisorby qui corrige le problème du gestionnaire d'événements qui n'est pas correctement supprimé.

copyToClipboard(item): void {
    let listener = (e: ClipboardEvent) => {
        e.clipboardData.setData('text/plain', (item));
        e.preventDefault();
    };

    document.addEventListener('copy', listener);
    document.execCommand('copy');
    document.removeEventListener('copy', listener);
}

Answer 5

La méthode ci-dessous peut être utilisée pour copier le message:-

export function copyTextAreaToClipBoard(message: string) {
  const cleanText = message.replace(/<\/?[^>]+(>|$)/g, '');
  const x = document.createElement('TEXTAREA') as HTMLTextAreaElement;
  x.value = cleanText;
  document.body.appendChild(x);
  x.select();
  document.execCommand('copy');
  document.body.removeChild(x);
}