Build a Word DOCX to PDF Converter Web App in Node.js & Express Using docx-pdf in Browser Using Javascript

Welcome folks today in this blog post we will be building a word docx to pdf converter web app in node.js & express using docx-pdf library 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 command as shown below

npm init -y

npm i express

npm i multer

npm i docx-pdf

And after that you will see the below directory structure of the app as shown below

As you can see we need to create the uploads directory where we will be storing all the uploaded files by the user. Now we need to make the index.js file and copy paste the following code

index.js

const express = require("express");

const bodyparser = require("body-parser");

const app = express();

app.use(express.static("uploads"));
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");
});

const express = require("express");

const bodyparser = require("body-parser");

const app = express();

app.use(express.static("uploads"));

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 including the express library and we are starting out the express app at the port number 5000. And then we are set the uploads directory as static using the expressstatic middleware. And then we are including the bodyparser middleware to the express app. And then we have the simple get request to the / route here we are loading the index.html template file.

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>Word DOCX to PDF Converter in Node.js & Express</title>
</head>
<body>
    <form action="/docxtopdf" method="post" enctype="multipart/form-data">
        <input type="file" name="file" required id="">
        <input type="submit" value="Download PDF File">
    </form>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Word DOCX to PDF Converter in Node.js & Express</title>

</head>

<body>

</form>

</body>

</html>

As you can see inside the html5 code we have the simple html form where we have the simple input field where we allow the user to upload files from their local pc or computer. And then we have the submit button to submit the form. Here we are making the post request to the /docxtopdf route. Now we need to define this route inside the index.js file as shown below

Uploading Files Using Multer

Now guys first of all we will be uploading files using multer library and then we will be converting the docx uploaded file to pdf document using docx-pdf library.

const multer = require("multer");

var path = require("path");

var storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, "uploads");
  },
  filename: function (req, file, cb) {
    cb(null, Date.now() + path.extname(file.originalname)); //Appending extension
  },
});

var upload = multer({ storage: storage });

const multer = require("multer");

var path = require("path");

var storage = multer.diskStorage({

destination: function (req, file, cb) {

cb(null, "uploads");

filename: function (req, file, cb) {

cb(null, Date.now() + path.extname(file.originalname)); //Appending extension

});

var upload = multer({ storage: storage });

As you can see we are importing the multer library and also importing the built in path module of node.js to set the dynamic filename to the uploaded file using the Date functions. And also we are passing the directory path which will be uploads where we will be storing all the uploaded files by the user. And then we are invoking the multer() constructor and inside it we are passing the storage object that we created earlier on. Now we need to pass this multer middleware inside the post request to convert the docx file to pdf document as shown below

var docxConverter = require("docx-pdf");

app.post("/docxtopdf", upload.single("file"), (req, res) => {
  let outputpath = Date.now() + "output.pdf";
  docxConverter(req.file.path, outputpath, function (err, result) {
    if (err) {
      console.log(err);
    }
    res.download(outputpath,() => {

    })
  });
});

var docxConverter = require("docx-pdf");

app.post("/docxtopdf", upload.single("file"), (req, res) => {

let outputpath = Date.now() + "output.pdf";

docxConverter(req.file.path, outputpath, function (err, result) {

if (err) {

console.log(err);

}

res.download(outputpath,() => {

})

});

As you can see we are importing the docx-pdf library to carry out the conversion process of docx to pdf. And inside this post request of /docxtopdf route we are passing the multer middleware to upload a single file. And inside it we are making the outputfilepath variable where we are storing the output pdf filename. And here we are calling the docx-pdf module and inside it we are passing the docx uploaded file path and then exporting it to the pdf document. And then we are downloading the file inside the browser using the download() method.

Now if we run the node.js app inside the command line as shown below

node index.js

FULL SOURCE CODE