How to Force Browser PDF File Download as Attachment in Browser Using Javascript & AJAX on Button Click in Node.js and Express Request or Route Response Full Project For Beginners


Welcome folks today in this blog post we will be forcing the browser to download the pdf file as attachment using javascript and AJAX on button click in node.js and express request or route as response.All the full source code of the application is shown below.




Get Started




In order to get started you need to install express library by using the pip command as shown below



pip install express



After installing this make a index.html file inside the node.js project and copy paste the below code






<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport"
    content="width=device-width, initial-scale=1.0" />
<div class="container">
<button id="download" class="btn btn-primary my-5">
Download PDF
<script src=
<script src=

$("#download").click(function (e) {
    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 = "Resume.pdf";

    // click on the <a> tag;

    // after clicking it, remove it from the DOM
    // 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.
    error: function (result) {


READ  Build a Drawing Paint HTML5 Canvas App to Draw Lines,Rectangles Using Pencil in Browser Using Vanilla Javascript Full Project For Beginners



Now create a app.js file and copy paste the following code






// 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}`));




Now make a routes.js file and copy paste the following code






// 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) => {"uploads/Resume.pdf");

// export router middleware and use it in app.js
module.exports = router;

Leave a Reply