Recently, a request was received that users click the download button to download the PDF file directly, rather than opening a new window for users to manually save.

After receiving the demand, I immediately started to search the documents on the Internet, and found that many methods claimed to be able to achieve direct download failed, only the following method successfully realized my demand, now translated for more people to use.

How to trigger the direct download of a PDF with JavaScript

Most Web applications now run on modern browsers, and technology has given us many new apis to call on. One advantage is that we can download files directly using BLOb and FileReader, rather than redirecting to a new TAB page.

In this article, I will demonstrate downloading a PDF file directly from a URL on a Web page.

Pay attention to

In our case we will download Use a PDF Hosted in the Mozilla Github IO Website, because it is free and has the CORS header set up, we can use it anywhere without worrying about cross-domain issues.

Rely on

The FileSaver library is needed to achieve the download goal. The library supports UMD, so you can use it directly in script tags or in modules.

If you use NPM, you can install it like this:

npm install file-saver --save

Then you can use it like this:

var FileSave = require('file-save');
var blob = new Blob(["hello world!"] and {type: "text/plain; charset=utf-8"});
FileSaver.saveAs(blob, "hello World.txt");
Copy the code

or

import FileSave from 'file-save';
var blob = new Blob(["hello world!"] and {type: "text/plain; charset=utf-8"});
FileSaver.saveAs(blob, "hello World.txt");
Copy the code

In addition, you can download FileSaver directly and use it in tabs.

The js file is introduced first

<script src="FileSaver.min.js"></script>
Copy the code

Then use the

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

saveAs(blob, "hello world.txt");
Copy the code

Click here for official documentation

Download the PDF directly using the URL

Thanks to FileSaver. Js, you can easily save file data in your browser using JavaScript. FileSaver. Js allows users to download files from the client, save Web application data, or send sensitive data to the server.

In this scenario, you want to download a PDF file from the server, but for some reason you don’t want users to click on it. You can easily do this using Filesaver.js. In the example below, we download the PDF from a simple URL. Depending on the usage scenario of your Web application, the PDF file can only be downloaded if the server meets certain conditions. Finally, it can be downloaded and processed using 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();
Copy the code

When the file download ends, the save program will automatically start saving.

As a reminder, if the browser does not support Blob, you can use this patch.

If you like, you can visit my blog