DEV Community: Chris

Generate invoice PDF file using HTML template

Chris — Tue, 05 Sep 2023 13:24:26 +0000

Today, I'll walk you through the process of generating an invoice PDF file for your backend app or custom script which could be run from the command line. Let's get started! 🎉

Introduction

Node.js programming language will be used for simplicity.
Handlebars template engine to separate data from the presentation.
html2pdf.app to convert HTML to PDF, but as an alternative Puppeteer can be used also (you can find a complete tutorial How to convert HTML to PDF with puppeteer).

Project structure

Let's assume we are creating a new project "generate-invoice", first Create a directory using the command mkdir generate-invoice. Then initialize a Node.js project by entering the command npm init and provide all the necessary information.

Now we need to install dependencies, which will be used. For that run the command npm i handlebars axios.

Having all the needed dependencies, let's create a conversion file using the command mkdir src && touch src/generate.js.

Now we need to store the template where the HTML code will be provided. Create a templates directory and invoice.html file for that with the command mkdir templates && touch templates/invoice.html.

This simple project structure is enough to start writing the code. Your project should look like this tree below.

├── package-lock.json
├── package.json
├── node_modules
├── src
│   └── generate.js
└── templates
    └── invoice.html

Prepare the template

Before diving into the conversion process, you'll need to create an HTML template for your invoice. This template will define the layout, content, and styling of your PDF invoice.

There are many invoice HTML templates you can find on Google. I am going to use an already created one, whose code source you can find here

In the end, it should look the following:

Feel free to customize the HTML template to match your branding and invoicing needs. You can update fonts, and colours, add your company logo, and include any necessary details like invoice number, customer information, etc.

Put your template HTML code into the templates/invoice.html file and let's move to the next step.

Convert HTML to PDF

First, we need to add needed dependencies to the conversion script.

import fs from 'fs';
import Handlebars from 'handlebars';
import axios from 'axios';

Now we can load the invoice HTML code into the Handlebars template.

const invoice = fs.readFileSync('./assets/invoice.html', 'utf8');
const template = Handlebars.compile(invoice);

Also, we need to set parameters which will be binded into the template, they can come from various places in your real project. For example database, Excel file, command line arguments and so on. I will define those parameters in the script directly for simplicity.

const params = {
    invoiceNr: 'H2P202307-01711',
    billTo: 'Anna Smith',
    invoiceDate: (new Date()).toDateString(),
    paymentDue: (new Date()).toDateString(),
    orderId: 112233,
    items: [
        {description: 'Domain registration', quantity: 2, price: '$10', total: '$20'},
        {description: 'Web hosting', quantity: 1, price: '$15', total: '$15'},
        {description: 'Consulting', quantity: 1, price: '$500', total: '$500'},
    ],
    subTotal: '$535',
    tax: '$53.5',
    total: '$588.5',
};

Now we can process the template by passing the parameters and get the result - the final HTML code which will be converted to the PDF document.

const html = template(params);

There are multiple options for how to convert HTML to PDF, one could be by using open-source projects like Puppeteer or wkhtmltopdf. I wrote a separate post How to convert HTML to PDF using Puppeteer, but now for simplicity, I going to use html2pdf.app. Its free plan gives 100 credits per month, excellent!

To register and get the free API key use the link: https://dash.html2pdf.app/registration

Once you have an API Key, let's finish the conversion part.

const apiKey = '******************'; // API key from https://html2pdf.app

const response = await axios.post('https://api.html2pdf.app/v1/generate', {
    html,
    apiKey,
}, {responseType: 'arraybuffer'});

To send the HTML code to the PDF conversion API there are only a few lines of code. Now what needs to be done is to save the response. For that add the code line below to your script.

fs.writeFileSync('./assets/invoice.pdf', response.data);

The complete conversion script code looks as follows:

import fs from 'fs';
import Handlebars from 'handlebars';
import axios from 'axios';

const invoice = fs.readFileSync('./assets/invoice.html', 'utf8');
const template = Handlebars.compile(invoice);
const params = {
    invoiceNr: 'H2P202307-01711',
    billTo: 'Anna Smith',
    invoiceDate: (new Date()).toDateString(),
    paymentDue: (new Date()).toDateString(),
    orderId: 112233,
    items: [
        {description: 'Domain registration', quantity: 2, price: '$10', total: '$20'},
        {description: 'Web hosting', quantity: 1, price: '$15', total: '$15'},
        {description: 'Consulting', quantity: 1, price: '$500', total: '$500'},
    ],
    subTotal: '$535',
    tax: '$53.5',
    total: '$588.5',
};

const html = template(params);
const apiKey = 'd3a0264f70864...'; // get api key on https://html2pdf.app

const response = await axios.post('https://api.html2pdf.app/v1/generate', {
    html,
    apiKey,
}, {responseType: 'arraybuffer'});

fs.writeFileSync('./assets/invoice.pdf', response.data);

You can find it on GitHub also https://github.com/html2pdfapp/examples/blob/main/src/generate-invoice.js

Conclusion

I like not to mix business logic or data with the presentation layer, and currently, there is a much clearer solution when we have a template separated from the data.

The simplicity of html2pdf.app API and its free plan allow us to save time and only with a few lines of code, we have the converted PDF file you can store it somewhere in the cloud or project directory.

Happy coding!

How to convert HTML to PDF using Puppeteer

Chris — Fri, 21 Jul 2023 19:29:07 +0000

Whether you're looking to generate invoices, create reports, or preserve web content for offline use, Puppeteer is a powerful tool that can automate the process seamlessly. In this guide, we will explore how to convert HTML to PDF using Puppeteer, an open-source Node.js library developed by Google.

Setting Up Puppeteer

To get started, you'll need to have Node.js installed on your machine. Open your terminal or command prompt and create a new directory for your project. Navigate into the project directory and initialize a new Node.js project by running the following command:

npm init -y

Next, install Puppeteer as a dependency by executing the following command:

npm install puppeteer

Puppeteer will now be added to your project, allowing you to programmatically control a headless Chrome or Chromium browser.

Writing the conversion script

Create a new JavaScript file, such as convert-html-to-pdf.js, in your project directory. Open the file in your preferred text editor and begin by importing the Puppeteer library:

const puppeteer = require('puppeteer');

Initializing Puppeteer and Converting HTML to PDF

Inside the convert-html-to-pdf.js file, add the following code to initialize Puppeteer and convert the HTML to PDF:

(async () => {
  try {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto('file:///path/to/your/html/file.html', { waitUntil: 'networkidle0' });

    // To use normal CSS instead of only print styles
    await page.emulateMediaType('screen');

    await page.pdf({ path: 'output.pdf', format: 'A4' });

      console.log('Conversion complete. PDF file generated successfully.');

      await browser.close();
    } catch (error) {
      console.error('An error occurred:', error);
    }

})();

The example shows how to convert an existing html file to the pdf, but you might be needed to convert html code which could be passed as a parameter to the puppeteer. In this case function page.setContent() should be used. Check the example below:

const html = '<html...';
await page.setContent(html, { waitUntil: 'networkidle0' });

Converting URL to PDF

You can easily update the code to convert an URL instead of HTML or file, by passing the URL to the page.goto method:

await page.goto('https://example.com', { waitUntil: 'networkidle0' });

It is important to understand waitUntil parameter and it's values to choose a proper one.

load: when load event is fired.
domcontentloaded: when the DOMContentLoaded event is fired.
networkidle0: when there are no more than 0 network connections for at least 500 ms.
networkidle2: when there are no more than 2 network connections for at least 500 ms.

For more detailed information, which options can be passed to the puppeteer.goto method check the puppeteer documentation.

Break down the code

We have created an async function using an immediately invoked function expression (IIFE) to ensure proper execution. Inside the function, we launched a new instance of the Puppeteer controlled browser.

We open a new page and navigate to the desired HTML file using the page.goto() method. Make sure to replace 'file:///path/to/your/html/file.html' with the actual path to your HTML file. By specifying { waitUntil: 'networkidle0' }, we ensure that the page is fully loaded before generating the PDF.

It is necessary to execute method: page.emulateMediaType('screen'); to have fully loaded CSS.

Finally, we call page.pdf() to convert the HTML to PDF and specify the output path and format. Adjust the path and format properties as needed. After successful conversion, we log a message and close the browser instance.

Running the conversion script

Save the convert-html-to-pdf.js file, navigate to your project directory in the terminal or command prompt, and run the following command:

node convert-html-to-pdf.js

Puppeteer will launch a headless browser, load the HTML file, convert it to PDF, and save the output as output.pdf in the project directory.

Using html2pdf.app API

Managing Puppeteer can be chalanging task, especially if you need to scale up the application. Huge number of the requests can break the server performance since PDF conversion requires quite many resources.

Make your life easier by using html to pdf API to convert PDFs.

Following code shows how it is simple todo with our api:

import axios from 'axios';
import fs from 'fs';

axios.post('https://api.html2pdf.app/v1/generate', {
  html: 'https://example.com',
  apiKey: '{your-api-key}',
}, {responseType: 'arraybuffer'}).then((response) => {
  fs.writeFileSync('./document.pdf', response.data);
}).catch((err) => {
  console.log(err.message);
});

Conclusion

By following the steps outlined in this guide, you can easily convert HTML files to PDF using Puppeteer. This versatile library opens up a world of possibilities for automating document generation, report creation, and more.

If you do not want to struggle with some edge cases and have a fast result, try already built in solutions to convert PDFs like html2pdf.app.

Happy coding!

My journey of making a side project which makes passive incomes

Chris — Sun, 15 May 2022 18:41:09 +0000

Hello, I want to share my story of how I have created my side project of html2pdf.app. You can see from the domain that it is the HTML to PDF conversion API.

Working as a full-time developer I was living quite a normal and good life. But one thought from time to time was coming to my head - creating my own project which makes money.

I decided to do something for a very specific niche, to avoid high competitiveness and where I have some experience. So I came up with the idea that a HTML to PDF API conversion service online would be a great one to start with.

Almost in every company where I worked, I had to implement some PDF generation feature and in old times it was very challenging to do.

How did I start

When I was starting a new project I decided to learn something new at the same time. Also if my project would not be successful at least I could learn something useful.

Being a PHP developer for a long time I had also experience with JavaScript and at that time the NodeJS framework was quite interesting to me. Also, I knew that there is a Headless Chrome engine which is very convenient to use with the Puppeteer library.

I noticed that using Headless Chrome converted PDFs are high quality and quite similar compared to the HTML. I understood that Headless Chrome has the power and I need to leverage it!

Since I have a full-time job and family, it was a challenge for me to find time to develop my side project. So I started to work on weekends, very slowly but I was moving forward.

NodeJS framework was unfamiliar to me and took significantly more time to do the same things which I could do with PHP. I did not know even how to use the debugger, or how to structure my app from the beginning. But after some time I was feeling more comfortable in this stack.

Tech stack

These are technologies that I have chosen to use. One thing which I would change is perhaps choosing golang instead of NodeJS.

NodeJS/TypeScript + ExpressJS/NestJS frameworks;
Mysql for permanent data storage;
MongoDB for storing conversions logs;
Redis for caching;
RabbitMQ for async jobs and async communication between microservices;

Also, I integrated third-party services like sentry, mailgun, stripe, mailerlite which are very helpful and make developer's life easier.

Microservices architecture

Since I chose microservices architecture things became even more complicated. It took a bit of time to set up multiple services to make communication among them proper.

So from my practice, I would suggest once you are doing a startup/side project and are focusing on how to make money not gain experience in a new field, skip new/fancy technologies, and create a monolith system, which could be scaled further.

The diagram below illustrates the relations between the microservices of my project.

Where to get customers?

So finally I launched my service totally free. My plan was to get new customers and make sure that my service is useful to somebody. And actually, it was useful, new clients were registering, and I do not know how I became on the first page of a Google Search by keyword “HTML to pdf API”. I also set up Google AdWords to get more new customers.

First paid customer

After some time I noticed that customers who are using the HTML to PDF conversion service are very grateful, some of them even asked how to send money for using the service. So I decided to monetize the service and establish a small company to make everything legal.

I left a free plan for the clients with limited conversions per month and also created paid plans, and things started moving forwards. I was very happy when I could cover server expenses and pay taxes without using my own money.

Currently, I have over 50 paying clients, not many but still a good achievement for me making passive incomes.

Challenges I faced

First of all, NodeJS has no static typing so it was very uncomfortable for me, even an IDE didn’t show autocompletion.

I was struggling with this for some time and decided to use TypeScript, so rewrote all the code in this language. It took some time to rewrite and set up the project to use TypeScript but it was definitely worth it.

Headless Chrome scalability and AWS Lambda

Another challenge I encountered was scalability because I was using a headless chrome engine just directly installed into the server where applications run.

From time to time I noticed that one instance of Headless Chrome sometimes crashed when there are more requests. So after some attempts to solve this problem, I decided to try the AWS Lambda function and the results were stunning.

It scales automatically and is able to handle high loads. Setting up a working Lambda function and Puppeteer library was a bit challenging but I managed it successfully.

Conclusion

As I wanted to learn and develop a project at the same time, I decided to use microservices architecture to gather more experience and this was a mistake.

I spent a lot of time making microservices work and increased the complexity of the whole infrastructure. If I could give a suggestion for someone who is starting a startup I wouldn’t recommend chasing cutting-edge technologies and definitely do not start with microservices.

Create an MVP first, and check how your audience is reacting to your product and what changes you need to make after the feedback. Then when you see that your project could be beneficial do some cleanups, refactoring, splitting things into microservices, etc.

No doubts, I learned a lot of new things and got an experience that I could not get at work working on regular projects.

There are many things that could be improved and make service better, but overall, I am happy to have created this project and had this experience.

I feel like I am growing as a professional by learning new things, and solving problems at the same time making my side project better.

That was my story, hope you enjoyed reading it. If somebody is interested more to know technical details I could answer with pleasure in the comments.