cómo descargar archivos en reaccionar js

tldr; obtenga el archivo de la URL, guárdelo como un Blob local, inyecte un elemento de enlace en el DOM y haga clic en él para descargar el Blob.

Tenía un archivo PDF almacenado en S3 detrás de una URL de Cloudfront. Quería que el usuario pudiera hacer clic en un botón e iniciar inmediatamente una descarga sin abrir una nueva pestaña con una vista previa en PDF. Generalmente, si un archivo está alojado en una URL que tiene un dominio diferente al sitio en el que se encuentra actualmente el usuario, muchos navegadores bloquean las descargas inmediatas por razones de seguridad del usuario. Si utiliza esta solución, no inicie la descarga del archivo a menos que un usuario haga clic en un botón para descargarlo intencionalmente.

Para superar esto, necesitaba obtener el archivo de la URL evitando las políticas CORS para guardar un Blob local que luego sería la fuente del archivo descargado. En el código siguiente, asegúrese de intercambiar sus propios archivos fileURL, Content-Typey FileName.

fetch('https://cors-anywhere.herokuapp.com/' + fileURL, {
    method: 'GET',
    headers: {
      'Content-Type': 'application/pdf',
    },
  })
  .then((response) => response.blob())
  .then((blob) => {
    // Create blob link to download
    const url = window.URL.createObjectURL(
      new Blob([blob]),
    );
    const link = document.createElement('a');
    link.href = url;
    link.setAttribute(
      'download',
      `FileName.pdf`,
    );

    // Append to html link element page
    document.body.appendChild(link);

    // Start download
    link.click();

    // Clean up and remove the link
    link.parentNode.removeChild(link);
  });

Esta solución hace referencia a soluciones para obtener un blob desde una URL y utilizar un proxy CORS .

Actualización A partir del 31 de enero de 2021 , la demostración de cors-anywhere alojada en servidores Heroku solo permitirá un uso limitado con fines de prueba y no se podrá utilizar para aplicaciones de producción. Tendrá que alojar su propio servidor cors-anywhere siguiendo cors-anywhere o cors-server .

Sep 19 '2020 06:09 Brian Li