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