Descargar archivos en React

1. Use el atributo download para descargar archivos en React
2. Use el complemento js-file-download para descargar archivos en React
3. Limitaciones de front-end al descargar un archivo en React

Al crear una aplicación React, a veces es necesario permitir que el usuario descargue un archivo. Por ejemplo, si compran un boleto, es posible que deseen descargarlo en PDF.

Este artículo explorará múltiples formas de descargar archivos en React.

Use el atributo download para descargar archivos en React

Normalmente, los desarrolladores web utilizan el elemento ancla <a> para navegar por otra página. El elemento <a> también acepta el atributo download. Le dice al navegador que guarde el archivo ubicado en la URL especificada en lugar de cambiar la URL.

Sin un valor específico, el navegador adivinará el nombre del archivo y su extensión. Si especifica el valor, se interpretará como un nombre de archivo.

El componente <Link> es parte del paquete react-router. Es una gran herramienta para una navegación fluida dentro de las aplicaciones de una sola página. Al igual que el elemento ancla, también acepta el atributo download y funciona de la misma manera.

Actualmente, el 94,5% de los internautas de todo el mundo utilizan navegadores compatibles con este atributo. Tiene otras limitaciones y condiciones. Para obtener más información sobre el atributo download, lea los documentos oficiales.

En algunos casos, si el navegador no admite el atributo download, el archivo se abrirá en la nueva pestaña.

Use el complemento js-file-download para descargar archivos en React

Lo más conveniente es usar un paquete externo para descargar un archivo. Hay muchas opciones, pero js-file-download es la más fácil de usar.

Le dice al navegador que guarde el archivo desde la fuente URL especificada. Tiene ventajas sobre el uso del atributo download porque puede guardar más archivos.

Echemos un vistazo al ejemplo:

import "./styles.css";
import axios from 'axios'
import fileDownload from 'js-file-download'
export default function App() {
  const handleClick = (url, filename) => {
    axios.get(url, {
      responseType: 'blob',
    })
    .then((res) => {
      fileDownload(res.data, filename)
    })
  }
  return (
    <div className="App">
      <button onClick={() => {() => handleClick('https://avatars.githubusercontent.com/u/9919?s=280&v=4', 'sample')}}>
        Download the File</button>
    </div>
  );
}

En este ejemplo, especificamos la fuente y el nombre preferido del archivo. Luego pasamos estos valores a la función fileDownload, importada del paquete js-file-download. Esta función hace todo lo demás por nosotros.

Si ejecuta este código en su entorno local create-react-app, descargará la imagen del enlace.

Limitaciones de front-end al descargar un archivo en React

Puede usar cualquiera de los dos enfoques descritos en este artículo en raras ocasiones. Sin embargo, como regla general, usar un código front-end para activar una descarga es una mala idea.

Los navegadores suelen bloquear las descargas inmediatas por motivos de seguridad. Se hace para evitar que los propietarios de sitios web obliguen a sus usuarios a descargar malware.

En su lugar, debe crear un punto final que devolverá los encabezados de respuesta para activar la descarga de un archivo. Y recuerda no iniciar la descarga del archivo sin el permiso del usuario.