Node.js Express FPDF Library Project to Export Raw Text to PDF Document Using HTML5 Form in Browser

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

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")
});

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

<!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>

<!DOCTYPE html>

<head>

</head>

<body>

<br>

</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

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

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.

function sleep(ms) {
  return new Promise((resolve) => {
    setTimeout(resolve, ms);
  });
}

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