Que hay de nuevo gente? Hace tiempo escribi un articulo sobre como copiar el contenido de un <div> en Javascript. En ese tiempo aun no habia descubierto Clipboard API que es una solución mucho mas limpia y vérsatil.
Clipboard API nos da la habilidad de trabajar con comandos del portapapeles (cortar, copiar y pegar) como tambien leer y escribir de manera asincrona en el clipboard del Sistema operativo.
Al estar en la pestaña activa automaticamente tenemos permiso para escribir el portapapeles, pero para leer al contenido del portapapeles es necesario obtener el permiso del usuario, que puedes pedir al tratar de leer el contenido del portapapeles.
Aqui hay un pequeño ejemplo:
<textarea name="" id="" cols="30" rows="10" class="target-textarea">
</textarea>
<button type="button" class="target-btn">Copy Text</button>
<button type="button" class="target-btn-image">Copy Image</button>
<script>
async function loadBlob(fileName) {
// Funcion que lee la imagen
const fetched = await fetch(fileName);
return await fetched.blob();
}
document.querySelector('.target-btn').addEventListener('click', async () => {
// Para escribir texto en el clipboard se utiliza "clipboard.writeText"
var input = document.querySelector('.target-textarea').value
navigator.clipboard.writeText(input)
})
document.querySelector('.target-btn-image').addEventListener('click', async () => {
// Para copiar imagenes se utiliza "clipboard.write"
const url = 'https://upload.wikimedia.org/wikipedia/commons/5/53/Google_Chrome_Material_Icon-450x450.png';
const blobInput = await loadBlob(url);
const clipboardItemInput = new ClipboardItem({ 'image/png': blobInput });
await navigator.clipboard.write([clipboardItemInput]);
})
</script>Como siempre puedes revisar mas a fondo las especificaciones en MDN. Por suerte esta API esta disponible en la gran mayoria de los navegadores, asi que no deberias tener problemas en usarla.
Happy Coding!
