Skip to content
Related Articles

Related Articles

Improve Article
How to send PDF in express route response and force browser download ?
  • Last Updated : 26 Apr, 2021

In this article, we will see how to send PDF files in the express route’s response and make the browser force download the file.

Approach:

  1. Load required packages, then create an express app.
  2. Define the routes for homepage and PDF download requests.
  3. Create an index.html file with a single button to download PDF.
  4. Execute ajax call on button click to GET the PDF.
  5. Specify responseType of ajax call as “blob” in the xhrFields, as “blob” is used to store objects such as images, audios and videos, since they require more space than other data types.
  6. On successful ajax call, convert the received  PDF file from blob format to PDF format.
  7. Now, to make the browser force download the PDF –
    a. Create a hidden <a> tag.
    b. Create a reference to the file using window.URL.createObjectURL() method.
    c. Set its href attribute to the blob’s URL.
    d. Set its download attribute to the filename.
    e. Click on the <a> tag.
    f. Remove the <a> tag from the DOM.
    g. Release an existing object URL, (the reference to the file), and let the browser know not to keep the reference to the file any longer.

Step 1:  Install necessary packages

Firstly, install the following node packages.

npm install --save express

Step 2: Create a basic Express server setup



Create a file named app.js and with the following code as shown below.

App.js




// Load necessary packages
const express = require("express");
  
// create an express app
const app = express();
  
// define PORT number to listen to the requests
const PORT = process.env.PORT || 3000;
  
// to serve files from uploads directory
app.use("/uploads", express.static("uploads"));
  
// express routes
app.use("/", require("./routes"));
  
// listen to requests
app.listen(PORT, () => console.log(`Server started running on PORT ${PORT}`));

Step 3: Define routes for the app

Create a file named routes.js and with the following code as shown below.

routes.js




// Load necessary packages
const express = require("express");
  
// express router 
const router = express.Router();
  
// respond with index.html when a GET request is made to the homepage
router.get("/", (req, res) => {
    res.sendFile(__dirname + "/views/index.html");
});
  
// route for handling PDF request
router.get("/downloadPDF", (req, res) => {
    res.download("uploads/Resume.pdf");
});
  
// export router middleware and use it in app.js
module.exports = router;

Step 4: Run the server

Now start your express server using the following command:

node app.js

Step 5: Open browser and enter URL 



Open your favorite browser and in the address bar enter http://localhost:3000/downloadPDF and then hit Enter, Resume.pdf file will get downloaded automatically.

Output:

Step 6: To make the PDF downloadable through a button.

You can make the browser download the PDF one click of a button using on click event listener on the button and then making an ajax request to the above URL.

To make PDF download on button click, firstly create an index.html file with the following contents:

index.html




<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8" />
 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 <meta name="viewport" 
       content="width=device-width, initial-scale=1.0" />
 <link
  href=
  rel="stylesheet"
  integrity=
"sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6"
  crossorigin="anonymous"
 />
</head>
<body>
 <div class="container">
  <button id="download" class="btn btn-primary my-5">
   Download PDF
  </button>
 </div>
 <script src=
         integrity=
"sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
  crossorigin="anonymous">
 </script>
 <script src=
         integrity=
"sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf"
  crossorigin="anonymous">
 </script>
  
 <script>
  $("#download").click(function (e) {
   $.ajax({
    type: "GET",
    url: "/downloadPDF",
    xhrFields: {
     // specify response type as "blob" to handle objects
     responseType: "blob",
    },
    success: function (data) {
  
     // creating a hidden <a> tag
     var a = document.createElement("a");
  
     // creating a reference to the file
     var url = window.URL.createObjectURL(data);
  
     // setting anchor tag's href attribute to the blob's URL
     a.href = url;
  
     // setting anchor tag's download attribute to the filename
     a.download = "Resume.pdf";
     document.body.append(a);
  
     // click on the <a> tag
     a.click();
  
     // after clicking it, remove it from the DOM
     a.remove();
     // release an existing object URL which was previously 
     // created by calling URL.createObjectURL()
     // once we have finished using an object URL, let the
     // browser know not to keep the reference to the file any longer.
     window.URL.revokeObjectURL(url);
    },
    error: function (result) {
     alert("error");
    },
   });
  });
 </script>
</body>
</html>

Output:

My Personal Notes arrow_drop_up
Recommended Articles
Page :