Skip to content

WebNinjaDeveloper.com

Programming Tutorials




Menu
  • Home
  • Youtube Channel
  • Official Blog
  • Nearby Places Finder
  • Direction Route Finder
  • Distance & Time Calculator
Menu

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

Posted on January 5, 2023

 

 

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

 

 

JavaScript
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

 

 

JavaScript
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.

 

 

JavaScript
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

 

 

 

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

 

 

Recent Posts

  • Android Java Project to Merge Multiple PDF Documents From Gallery Using iTextPDF Library
  • Android Java Project to Detect System Hardware & System CPU Info & Display inside TextView Widget
  • Android Java Project to Integrate Google OAuth2 Login & Logout System & Save User Info in SharedPreferences
  • Android Java Project to Export Raw Text to PDF Document Using iTextPDF Library
  • Android Java Project to Export Images From Gallery to PDF Document Using iTextPDF Library
  • Angular
  • Bunjs
  • C#
  • Deno
  • django
  • Electronjs
  • java
  • javascript
  • Koajs
  • kotlin
  • Laravel
  • meteorjs
  • Nestjs
  • Nextjs
  • Nodejs
  • PHP
  • Python
  • React
  • ReactNative
  • Svelte
  • Tutorials
  • Vuejs




©2023 WebNinjaDeveloper.com | Design: Newspaperly WordPress Theme