Tres formas de copiar el contenido de una página con JavaScript (compartir resumen)

Hay muchos complementos de terceros que pueden implementar la función de copia, pero si lo hacemos nosotros mismos, ¿sabemos cómo implementarlo?

Este artículo presenta tres opciones de implementación.

Método 1: API del Portapapeles asíncrono

Uso de la API del Portapapeles asíncrono

Este método es el más fácil de usar, pero la compatibilidad no es muy buena y existen muchos requisitos.

Código de muestra:

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

tenga en cuenta que el valor de retorno del método es una Promesa. Y al utilizar este método, la página debe estar enfocada; de lo contrario, se informará un error.

Método 2: la API Document.execCommand

utiliza Document.execCommand.

Aunque este método se ha abandonado y ya no es un estándar web, tiene muchos factores históricos y creo que los navegadores lo admitirán durante mucho tiempo.

Copiar el contenido del elemento DOM

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

Al copiar elementos DOM, debe utilizar la API de selección y la API de rango adicionalmente.

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

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

Código de muestra:

const copyButton = document.getElementById('copyButton');
contenido constante = document.getElementById('contenido');
copyButton.addEventListener('hacer clic', función () {
  selección constante = ventana.getSelection();
  rango constante = document.createRange();
  //Establece el rango de contenido seleccionado.selectNodeContents(content);
  // Borrar la selección selección.removeAllRanges();
  //Agregar contenido seleccionado selección.addRange(range);
  document.execCommand('copiar');
});

primero se debe borrar la selección y luego se agrega el rango.

Hay un problema de detalles aquí. Después de hacer clic en el botón Copiar, se selecciona el contenido copiado, lo cual es un poco brusco.

La solución es llamar a selection.removeAllRanges() después de completar la copia para borrar la selección.

Considere otra situación en la que el usuario selecciona parte de la página antes de copiarla. Una vez completada la copia, además de borrar el contenido de la copia seleccionada, también debe restaurar el contenido que el usuario seleccionó antes de copiar.

El código de implementación es el siguiente:

const copyButton = document.getElementById('copyButton');
contenido constante = document.getElementById('contenido');
copyButton.addEventListener('hacer clic', función () {
  selección constante = ventana.getSelection();
  rango constante = document.createRange();
  //Almacenar en caché el contenido seleccionado por el usuario const currentRange =
    selección.rangeCount === 0 ? nulo: selección.getRangeAt(0);
  //Establecer rango de fragmentos de documento.selectNodeContents(content);
  // Borrar la selección selección.removeAllRanges();
  //Establece el fragmento del documento como contenido seleccionado Selection.addRange(range);
  intentar {
    // Copiar al portapapeles document.execCommand('copiar');
  } atrapar (errar) {
    // Indica que la copia falló} finalmente {
    selección.removeAllRanges();
    si (rango actual) {
      //Restaurar el contenido seleccionado por el usuario selección.addRange(currentRange);
    }
  }
});

Primero almacene en caché el contenido seleccionado por el usuario y luego restáurelo una vez completada la copia.

Copie el contenido del elemento de entrada

y utilice el método select del objeto del elemento de entrada para seleccionar el contenido. No es necesario crear un fragmento de rango para configurar el contenido seleccionado.

Código de ejemplo:

const copyButton = document.getElementById('copyButton');
const inputEl = document.getElementById('entrada');
copyButton.addEventListener('hacer clic', función () {
  selección constante = ventana.getSelection();
  rango actual constante =
    selección.rangeCount === 0 ? nulo: selección.getRangeAt(0);
  //Selecciona el contenido de entrada inputEl.select();
  //Copiar al portapapeles intenta {
    document.execCommand('copiar');
  } atrapar (errar) {
    // Indica que la copia falló // . . .
  } finalmente {
    selección.removeAllRanges();
    si (rango actual) {
      //Restaurar el contenido seleccionado por el usuario selección.addRange(currentRange);
    }
  }
});

al hacer clic en el botón copiar tampoco se eliminará el contenido seleccionado previamente.

Método 3: sobrescribir el evento de copia

w3c.github.io/clipboard-a…

Cite un fragmento de código en el enlace anterior como ejemplo:

// Sobrescriba lo que se está copiando en el portapapeles.
document.addEventListener('copiar', función (e) {
  // e.clipboardData está inicialmente vacío, pero podemos configurarlo en el
  // datos que queremos copiar en el portapapeles.
  e.clipboardData.setData('text/plain', 'Huevos revueltos occidentales');
  // Esto es necesario para evitar que la selección del documento actual
  // siendo escrito en el portapapeles.
  e.preventDefault();
});

Copie cualquier contenido de la página y péguelo. El contenido de salida será "huevos revueltos occidentales".