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 Project to Convert CSV Files to HTML and PDF Documents in Browser Using Javascript

Posted on February 12, 2023

 

 

Welcome folks today in this blog post we will be converting csv files to html and pdf documents in browser using javascript. All the full source code of the application is shown below.

 

 

Get Started

 

 

In order to get started you need to make a new node.js project using the below commands as shown below

 

 

npm init -y

 

 

npm i express

 

 

npm i multer

 

 

npm i csv-converter-to-pdf-and-html

 

 

And after that you will see the below directory structure of the node.js and express app as shown below

 

 

 

 

 

Basic Example

 

 

In this below snippet of code we are importing the library and then you need to have the users.csv file stored inside the local directory and it will create the folder and it will contain the html and pdf documents as shown below

 

 

index.js

 

 

JavaScript
1
2
3
4
5
6
7
8
9
const Converter = require("csv-converter-to-pdf-and-html")
const path = require("path")
const converter = new Converter()
const filePath = path.resolve("./users.csv") // Caminho completo
const destinationPath = path.resolve("./HTMLandPDF") // Aqui não precisa especificar a extensão (HTML or PDF)
converter.HTMLAndPDFConverter(filePath, destinationPath)

 

 

 

 

 

 

 

 

Express App

 

 

Now we can turn the above code into a fully fledged express app where we take the input from the user and that csv file will be uploaded to the public/uploads folder and then we will be downloading the html and pdf documents in the browser.

 

 

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
const Converter = require("csv-converter-to-pdf-and-html");
const path = require("path");
const express = require('express')
const multer = require('multer')
 
const app = express()
 
 
app.use(express.static("public/uploads"));
 
var storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, "public/uploads");
  },
  filename: function (req, file, cb) {
    cb(null, Date.now() + path.extname(file.originalname)); //Appending extension
  },
});
 
var upload = multer({ storage: storage }).single('csv');
 
app.get('/', (req, res) => {
    res.sendFile(__dirname + "/index.html")
})
 
app.post('/convert', (req, res) => {
 
    output = Date.now() + "output"
 
    upload(req, res, (err) => {
        if (err) {
            console.log(err)
        } else {
            console.log(req.file.path)
 
            
const converter = new Converter();
 
const filePath = path.resolve(req.file.path); // Caminho completo
const destinationPath = path.resolve("./" + output); // Aqui não precisa especificar a extensão (HTML or PDF)
 
            converter.HTMLAndPDFConverter(filePath, destinationPath)
        
 
 
        }
    })
})
 
app.listen(5000, () => {
    console.log("App is litening on port 5000")
})

 

 

And here we are loading the index.html template file whenever user goes to the / route so just create the index.html file and it will contain a simple user form where he or she can upload the csv file and make a post request to the /convert route inside the express app as shown below

 

 

index.html

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!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>Document</title>
</head>
<body>
    <form method="post" enctype="multipart/form-data" action="/convert">
        <input type="file" name="csv" id="">
        <button>Convert to PDF</button>
    </form>
</body>
</html>

 

 

Recent Posts

  • Android Java Project to Capture Image From Camera & Save it in SharedPreferences & Display it in Grid Gallery
  • Android Java Project to Store,Read & Delete Data Using SharedPreferences Example
  • Android Java Project to Download Multiple Images From URL With Progressbar & Save it inside Gallery
  • Android Java Project to Capture Image From Camera & Save it inside Gallery
  • Android Java Project to Crop,Scale & Rotate Images Selected From Gallery and Save it inside SD Card
  • 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