Html-template-to-pdf NPM

html-template-to-pdf

Cross-platform library that converts a html file into a pdf.

Take a look at html-pdf-node package for additional pdf generation options.

Installation

npm install html-template-to-pdf

Usage

Here is an example of how to generate a pdf from index.html.

const fs = require("fs");
const generatePDF = require("html-template-to-pdf");

async function main() {
  const arrayBuffer = await generatePDF("index.html");
  const fileStream = fs.createWriteStream("output.pdf");
  fileStream.write(Buffer.from(arrayBuffer));
  fileStream.end();
}

main();

Templating

Replacing placeholders

The library allows you to use templating to generate dynamic pdfs. It uses the second argument of the generatePDF function. Here is an example of how to use it.

const fs = require("fs");
const generatePDF = require("html-template-to-pdf");

async function main() {
  const arrayBuffer = await generatePDF("index.html", { str: "World!" });
  const fileStream = fs.createWriteStream("output.pdf");
  fileStream.write(Buffer.from(arrayBuffer));
  fileStream.end();
}

main();

The HTML file index.html should look like this.

<p>Hello { str }</p>

The output pdf will look like this:

Hello World!

Pseudo conditional templating

Showing or hiding elements

You can also use pseudo conditional templating to hide or show elements. Here is an example of how to use it.

const fs = require("fs");
const generatePDF = require("html-template-to-pdf");

async function main() {
  /*
   **  When `show` is true, the element will be shown.
   **  When `show` is false, the element will be hidden.
   */
  const arrayBuffer = await generatePDF("index.html", { show: true });
  const fileStream = fs.createWriteStream("output.pdf");
  fileStream.write(Buffer.from(arrayBuffer));
  fileStream.end();
}

main();

The HTML file index.html should look like this.

<p>Hello ?{show World! }?</p>

The output pdf will look like this:

Hello World!

Or if show is false, the output pdf will look like this:

Hello

Negative conditions

Use the prefix ! in front of the condition to make it negative. In the following example: the element will only be visible if show is false

<p>Hello ?{!show World! }?</p>

Example

const fs = require("fs");
const generatePDF = require("html-template-to-pdf");

async function main() {
  const arrayBuffer = await generatePDF("index.html", {
    employeeName: "John Doe",
    salary: "$9000",
    show: true,
  });
  const fileStream = fs.createWriteStream("output.pdf");
  fileStream.write(Buffer.from(arrayBuffer));
  fileStream.end();
}

main();

<!DOCTYPE html>
<html>
  <body>
    <div>
      <!-- The div will only be visible if `show` is set -->
      ?{show
      <div>
        <p>Hello, { employeeName }</p>

        <!-- The paragraph will be shown if `salary` is set. Note that `salary` can be of any type: Boolean, Number, Float, String, ...  -->
        ?{salary
        <p>Your salary is { salary }</p>
        }?
      </div>
      }?
    </div>
  </body>
</html>

Would generate: