How to trigger the direct download of a PDF with JavaScript

In most of the web applications today, the user doesn't use an outdated browser, due to the basic requirements and features that the web app offers. This is a great advantage when we talk about the technical side, as you have many new APIs available. One of the advantages, is the availability of Blobs and the FileReader, that correctly worked can be used to download files directly from JavaScript without redirecting the user to a new website.

In this article, we'll explain you how to download directly a PDF from a web URL in the browser easily.

Requirements

You will need the FileSaver library to achieve your goal. This library has support with UMD (Universal Module Definition) so you can use it in the browser and access it from the window or you can require it as a module with any bundler.

If you use NPM, you can install it in your project using:

npm install file-saver --save

And then you can just require the module as:

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

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

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

Alternatively, you can download a copy of the minified script and add in your HTML document with a script tag:

<!-- Include the script from a local copy -->
<script src="FileSaver.min.js"></script>

And use it like:

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

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

Visit the official repository at Github for more information about this library.

Download directly PDF from URL

Thanks to FileSaver.js you will be able to save the data of a file in JavaScript as a download in your browser easily. FileSaver.js implements the saveAs FileSaver interface in browsers that do not natively support it. FileSaver.js is the solution to saving files on the client-side, and is perfect for webapps that need to generate files, or for saving sensitive information that shouldn't be sent to an external server.

In this case, if you want to do it from a PDF that is available on the server, but for some reason you don't want to open a new window for it, so the user won't need to do right click, save PDF as etc, you can use easily this library to achieve it. In the following example, we are downloading a PDF from a simple URL, according to the architecture of your application, the PDF may be available only under certain conditions on the server to finally be served and processed internally by JavaScript:

var oReq = new XMLHttpRequest();
// The Endpoint of your server 
var URLToPDF = "https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf";

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

// Important to use the blob response type
oReq.responseType = "blob";

// When the file request finishes
// Is up to you, the configuration for error events etc.
oReq.onload = function() {
    // Once the file is downloaded, open a new window with the PDF
    // Remember to allow the POP-UPS in your browser
    var file = new Blob([oReq.response], { 
        type: 'application/pdf' 
    });
    
    // Generate file download directly in the browser !
    saveAs(file, "mypdffilename.pdf");
};

oReq.send();

Once the download of the file finishes, the save process starts automatically. Note that if the browser doesn't support the Blob API, you can add a polify to solve this inconvenient.

Happy coding !