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:
- Load required packages, then create an express app.
- Define the routes for homepage and PDF download requests.
- Create an index.html file with a single button to download PDF.
- Execute ajax call on button click to GET the PDF.
- 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.
- On successful ajax call, convert the received PDF file from blob format to PDF format.
- 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
const express = require("express");
const app = express();
const PORT = process.env.PORT || 3000;
app.use("/uploads", express.static("uploads"));
app.use("/", require("./routes"));
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
const express = require("express");
const router = express.Router();
router.get("/", (req, res) => {
res.sendFile(__dirname + "/views/index.html");
});
router.get("/downloadPDF", (req, res) => {
res.download("uploads/Resume.pdf");
});
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:
