Node.js Express Project to Convert CSV Files to HTML and PDF Documents in Browser Using Javascript

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

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)

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

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

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

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

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<button>Convert to PDF</button>

</form>

</body>

</html>