Node.js Express to Convert HTML Template With CSS to PDF Documents Using html-pdf Library in Browser

Welcome folks today in this blog post we will be converting html template to pdf document using html-pdf library in node.js and express using javascript. All the full source code of the application is shown below.

Get Started

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

npm init -y

After we will be installing the dependencies using the below command as shown below

npm i express

npm i multer

npm i html-pdf

After we will see the below directory structure of the node.js app as shown below

As you can see we need to create the public/uploads directory where we will be storing the uploaded files as shown above. And now we need to make the index.js file and copy paste the below code

index.js

const express = require('express')

const multer = require('multer')

const pdf = require('html-pdf')

const fs = require('fs')

const path = require('path')

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('file');

const app = express()

app.use(express.static('public/uploads'))

app.get('/', (req, res) => {
    res.sendFile(__dirname + "/index.html")
})

app.post('/htmltopdf', (req, res) => {

    output = Date.now() + "output.pdf"
    upload(req, res, (err) => {
        if (err) {
            console.log(err)
        }
        else {
            console.log(req.file.path)

            var html = fs.readFileSync(req.file.path, "utf8");
            var options = { format: "Letter" };

            pdf
              .create(html, options)
              .toFile(output, function (err, response) {
                if (err) return console.log(err);
                  console.log(response.filename); // { filename: '/app/businesscard.pdf' }
                  
                  res.download(response.filename, () => {
                      
                  })
              });
        }
    })
})


app.listen(5000, () => {
    console.log("App is listening on port 5000")
})

const express = require('express')

const multer = require('multer')

const pdf = require('html-pdf')

const fs = require('fs')

const path = require('path')

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('file');

const app = express()

app.use(express.static('public/uploads'))

app.get('/', (req, res) => {

res.sendFile(__dirname + "/index.html")

})

app.post('/htmltopdf', (req, res) => {

output = Date.now() + "output.pdf"

upload(req, res, (err) => {

if (err) {

console.log(err)

}

else {

console.log(req.file.path)

var html = fs.readFileSync(req.file.path, "utf8");

var options = { format: "Letter" };

pdf

.create(html, options)

.toFile(output, function (err, response) {

if (err) return console.log(err);

console.log(response.filename); // { filename: '/app/businesscard.pdf' }

res.download(response.filename, () => {

})

});

}

})

app.listen(5000, () => {

console.log("App is listening on port 5000")

})

As you can see we are importing the express and multer library. And also we are importing the html-pdf library and then we are loading the index.html file when we go to the / home route. And then we are written the /htmltopdf post route where we are taking the uploaded html file and converting to pdf document and also we are downloading that file inside the pdf document. And now we need to make an index.html file and copy paste the following code

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>HTML TO PDF using html-pdf library</title>
</head>
<body>
    <form action="/htmltopdf" method="post" enctype="multipart/form-data">
        <input type="file" name="file" id="" required accept=".html">
        <input type="submit" value="Convert to PDF">
    </form>
</body>
</html>

<!DOCTYPE html>

<head>

<title>HTML TO PDF using html-pdf library</title>

</head>

<body>

</form>

</body>

</html>