Welcome folks today in this blog post we will be exporting raw text
to pdf document
in browser using html5 form
in javascript using fpdf
library. All the full source code of the application is shown below.
Get Started
In order to get started you need to initiate a new node.js
project using the below command as shown below
npm init -y
npm i express
npm i node-fpdf
Directory Structure
And now we need to make the index.js
file which will be the starting
point of the express app as shown below
index.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
const express = require("express"); const app = express(); const bodyparser = require("body-parser"); const fs = require('fs') app.use(bodyparser.urlencoded({ extended: false })); app.use(bodyparser.json()); app.get("/", (req, res) => { res.sendFile(__dirname + "/index.html"); }); app.listen(5000,() => { console.log("App is listening on port 5000") }); |
As you can see we are starting an express
app at the port
number 5000. And then we are loading the index.html
template file when the user goes to the home
page or /
route. And also we are importing the bodyParser
middleware and applying to the express app.
Now we need to make the index.html
file where we will be having the html5
form where we will be having the textarea
element where we allow the user to submit
the raw text and then we will have the button to submit the form
in order to create the pdf
document.
index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!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"> <title>Raw Text to PDF</title> </head> <body> <form action="/convert" method="post"> <textarea type="text" name="text" cols="85" rows="15" placeholder="Enter the text" required></textarea> <br> <input type="submit" value="Download PDF File"> </form> </body> </html> |
As you can see we are submitting to the /convert
endpoint and the method is post
. Now we need to make this endpoint
inside the index.js
file where we get the contents
of the textarea and then create the pdf
document using the fpdf
library as shown below
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
const FPDF = require("node-fpdf"); app.post("/convert", async (req, res) => { const text = req.body.text; // get the raw text from the form input field let outputfile = Date.now() + "output.pdf"; const pdf = new FPDF("P", "mm", "A4"); pdf.AddPage(); pdf.SetFont("Arial", "B", 12); pdf.MultiCell(0, 10, text); pdf.Output("F", outputfile); await sleep(1000); res.download(outputfile,() => { fs.unlinkSync(outputfile) }); }); |
As you can see inside the above request
we are getting the raw
text content and then using the fpdf
library to create a new pdf document and then adding a new page
using the AddPage()
method and then we are setting the custom
font and then we are inserting multiple lines of text
inside the pdf document using the multiCell()
method and then we are exporting to a pdf
document using the output()
method. And then we are waiting for 1
second using the custom sleep() method. This method we will define as shown below. After that we are downloading the pdf
file as an attachment inside the browser.
1 2 3 4 5 |
function sleep(ms) { return new Promise((resolve) => { setTimeout(resolve, ms); }); } |
As you can see we are using the javascript built in method of setTimeout()
to wait for ms
passed in the argument. Now if you execute the node.js
app using the below command as shown below
node index.js
Full Source Code
index.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
const express = require("express"); const app = express(); const FPDF = require("node-fpdf"); const bodyparser = require("body-parser"); const fs = require('fs') app.use(bodyparser.urlencoded({ extended: false })); app.use(bodyparser.json()); app.get("/", (req, res) => { res.sendFile(__dirname + "/index.html"); }); app.post("/convert", async (req, res) => { const text = req.body.text; // get the raw text from the form input field let outputfile = Date.now() + "output.pdf"; const pdf = new FPDF("P", "mm", "A4"); pdf.AddPage(); pdf.SetFont("Arial", "B", 12); pdf.MultiCell(0, 10, text); pdf.Output("F", outputfile); await sleep(1000); res.download(outputfile,() => { fs.unlinkSync(outputfile) }); }); function sleep(ms) { return new Promise((resolve) => { setTimeout(resolve, ms); }); } app.listen(5000,() => { console.log("App is listening on port 5000") }); |