Clipboard API – Copiar desde tu web al portapapeles

Share on facebook
Share on twitter
Share on whatsapp
Share on telegram

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!

José Miguel Concha Parra

José Miguel Concha Parra

Agregar un comentario

Su dirección de correo no se hará público. Los campos requeridos están marcados *