Trois façons de copier le contenu d'une page avec JavaScript (partage de résumé)

Il existe de nombreux plug-ins tiers qui peuvent implémenter la fonction de copie, mais si nous le faisons nous-mêmes, savons-nous comment l'implémenter ?

Cet article présente trois options de mise en œuvre.

Méthode 1 : API Async Clipboard

Utilisation de l'API Async Clipboard

Cette méthode est la plus simple à utiliser, mais la compatibilité n'est pas très bonne et les exigences sont nombreuses.

Exemple de code :

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

Notez que la valeur de retour de la méthode est une promesse. Et lorsque vous utilisez cette méthode, la page doit être mise au point, sinon une erreur sera signalée.

Méthode 2 : L'API Document.execCommand

utilise Document.execCommand

Bien que cette méthode ait été abandonnée et ne soit plus un standard Web, elle présente de nombreux facteurs historiques et je pense que les navigateurs la prendront en charge pendant longtemps.

Copier le contenu de l'élément DOM

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

Lors de la copie d'éléments DOM, vous devez utiliser en plus l'API de sélection et l'API Range.

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

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

Exemple de code :

const copyButton = document.getElementById('copyButton');
const content = document.getElementById('content');
copyButton.addEventListener('clic', function() {
  const sélection = window.getSelection();
  const range = document.createRange();
  //Définit la plage de contenu sélectionnée.selectNodeContents(content);
  // Efface la sélection selection.removeAllRanges();
  //Ajouter le contenu sélectionné selection.addRange(range);
  document.execCommand('copie');
});

La sélection doit d'abord être effacée, puis la plage est ajoutée.

Il y a un problème de détail ici. Après avoir cliqué sur le bouton Copier, le contenu copié est sélectionné, ce qui est un peu abrupt.

La solution consiste à appeler selection.removeAllRanges() une fois la copie terminée pour effacer la sélection.

Considérons une autre situation dans laquelle l'utilisateur sélectionne une partie de la page avant de la copier. Une fois la copie terminée, en plus d'effacer le contenu de la copie sélectionné, vous devez également restaurer le contenu sélectionné par l'utilisateur avant la copie.

Le code d'implémentation est le suivant :

const copyButton = document.getElementById('copyButton');
const content = document.getElementById('content');
copyButton.addEventListener('clic', function() {
  const sélection = window.getSelection();
  const range = document.createRange();
  //Cache le contenu sélectionné par l'utilisateur const currentRange =
    sélection.rangeCount === 0 ? null : sélection.getRangeAt(0);
  //Définir le fragment de document range.selectNodeContents(content);
  // Efface la sélection selection.removeAllRanges();
  //Définit le fragment de document comme contenu sélectionné selection.addRange(range);
  essayer {
    // Copier dans le presse-papiers document.execCommand('copy');
  } attraper (erreur) {
    // Invite indiquant que la copie a échoué} finalement {
    sélection.removeAllRanges();
    si (currentRange) {
      // Restaurer le contenu sélectionné par l'utilisateur Selection.addRange (currentRange);
    }
  }
});

Mettez d'abord en cache le contenu sélectionné par l'utilisateur, puis restaurez-le une fois la copie terminée.

Copiez le contenu de l'élément d'entrée

et utilisez la méthode select de l'objet élément d'entrée pour sélectionner le contenu. Il n'est pas nécessaire de créer un fragment de plage pour définir le contenu sélectionné.

Exemple de code :

const copyButton = document.getElementById('copyButton');
const inputEl = document.getElementById('input');
copyButton.addEventListener('clic', function() {
  const sélection = window.getSelection();
  const currentRange =
    sélection.rangeCount === 0 ? null : sélection.getRangeAt(0);
  //Sélectionnez le contenu d'entrée inputEl.select();
  //Copier dans le presse-papiers, essayez {
    document.execCommand('copie');
  } attraper (erreur) {
    // Invite indiquant que la copie a échoué // . . .
  } enfin {
    sélection.removeAllRanges();
    si (currentRange) {
      // Restaurer le contenu sélectionné par l'utilisateur Selection.addRange (currentRange);
    }
  }
});

Cliquer sur le bouton Copier ne supprimera pas non plus le contenu précédemment sélectionné.

Méthode 3 : écraser l'événement de copie

w3c.github.io/clipboard-a…

Citez un morceau de code dans le lien ci-dessus à titre d'exemple :

// Écrasez ce qui est copié dans le presse-papiers.
document.addEventListener('copie', fonction (e) {
  // e.clipboardData est initialement vide, mais nous pouvons le définir sur
  // les données que nous voulons copier dans le presse-papiers.
  e.clipboardData.setData('text/plain', 'Œufs brouillés occidentaux');
  // Ceci est nécessaire pour empêcher la sélection actuelle du document de
  // en cours d'écriture dans le presse-papiers.
  e.preventDefault();
});

Copiez n'importe quel contenu de la page et collez le contenu de sortie qui sera "Œufs brouillés occidentaux".