Aprende a descargar directamente un archivo PDF desde una URL usando FileSaver.js

Cómo activar la descarga directa de un PDF con JavaScript

En la mayoría de las aplicaciones web actuales, el usuario no usa un navegador desactualizado debido a los requisitos básicos y las características que ofrece la aplicación web. Esta es una gran ventaja cuando hablamos del aspecto técnico, ya que tiene muchas API nuevas disponibles. Una de las ventajas es la disponibilidad de Blobs y el FileReader, que funciona correctamente se puede utilizar para descargar archivos directamente desde JavaScript sin redirigir al usuario a un nuevo sitio web.

En este artículo, le explicaremos cómo descargar directamente un PDF desde una URL web en el navegador fácilmente.

Nota

Para los ejemplos, usaremos un PDF alojado en el sitio web de Mozilla Github IO , que es absolutamente gratuito y tiene encabezados CORS, por lo que se puede usar en todas partes para realizar pruebas.

Requisitos

Necesitará la biblioteca FileSaver para lograr su objetivo. Esta biblioteca tiene soporte con UMD (Universal Module Definition) por lo que puede usarla en el navegador y acceder a ella desde la ventana o puede requerirla como módulo con cualquier paquete.

Si usa NPM, puede instalarlo en su proyecto usando:

npm install file-saver --save

Y luego solo puede requerir el módulo como:

var FileSaver = require('file-saver');

var blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"});

FileSaver.saveAs(blob, "hello world.txt");

Alternativamente, puede descargar una copia del script minificado y agregarlo en su documento HTML con una etiqueta de script:

<!-- Incluya el script de una copia local -->
<script src="FileSaver.min.js"></script>

Y utilícelo como:

var blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"});

saveAs(blob, "hello world.txt");

Visite el repositorio oficial en Github para obtener más información sobre esta biblioteca.

Descarga directamente PDF desde URL

Gracias a FileSaver.js podrás guardar los datos de un archivo en JavaScript como descarga en tu navegador fácilmente. FileSaver.js implementa la saveAsinterfaz FileSaver en navegadores que no la admiten de forma nativa. FileSaver.js es la solución para guardar archivos en el lado del cliente y es perfecto para aplicaciones web que necesitan generar archivos o para guardar información confidencial que no debería enviarse a un servidor externo.

En este caso, si desea hacerlo desde un PDF que está disponible en el servidor, pero por alguna razón no desea abrir una nueva ventana para él, por lo que el usuario no necesitará hacer clic derecho, guardar PDF como, etc., puede usar fácilmente esta biblioteca para lograrlo. En el siguiente ejemplo, estamos descargando un PDF desde una URL simple, de acuerdo con la arquitectura de su aplicación, el PDF puede estar disponible solo bajo ciertas condiciones en el servidor para finalmente ser servido y procesado internamente por JavaScript:

var oReq = new XMLHttpRequest();
// El punto final de su servidor
var URLToPDF = "https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf";

// Configurar XMLHttpRequest
oReq.open("GET", URLToPDF, true);

// Importante para usar el tipo de respuesta de blob
oReq.responseType = "blob";

// Cuando finaliza la solicitud del archivo
// Depende de usted, la configuración de eventos de error, etc.
oReq.onload = function() {
     // Una vez descargado el archivo, abre una nueva ventana con el PDF
     // Recuerde permitir los POP-UPS en su navegador
    var file = new Blob([oReq.response], { 
        type: 'application/pdf' 
    });
    
    // ¡Genere la descarga de archivos directamente en el navegador!
    saveAs(file, "mypdffilename.pdf");
};

oReq.send();

Una vez que finaliza la descarga del archivo, el proceso de guardado se inicia automáticamente. Tenga en cuenta que si el navegador no es compatible con la API de Blob, puede agregar una política para resolver este inconveniente .

Que te diviertas ❤️!


Interesado en la programación desde los 14 años, Carlos es un programador autodidacta, fundador y autor de la mayoría de los artículos de Our Code World.

Conviertete en un programador más sociable

Patrocinadores