Blog

Generate PDF of Invoice or Receipt with wkhtmltopdf or Headless Chrome

Published Jul 12, 2018

If you’re a developer building some kind of shopping cart or checkout mechanism, chances are you will have to provide functionality to generate invoices and receipts in PDF format. This can be a real hassle, especially if you’re deployed in a cloud infrastructure like AWS, Azure, or Heroku.

The easiest way to generate a PDF of an invoice or receipt is to assemble the invoice in HTML first. Once it is in HTML format, which would be great to show on the web page in the first place, you can send that HTML a PDF engine such as wkhtmltopdf or Headless Chrome. Both engines should be perfectly sufficient for generating simple invoices / receipts.

Some basic HTML for an invoice can be found on Github. I found this project which has a simplistic invoice / receipt available: https://github.com/sparksuite/simple-html-invoice-template. The code for the invoice is in this github gist below.

	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>A simple, clean, and responsive HTML invoice template</title>

	<style>
	.invoice-box {
	max-width: 800px;
	margin: auto;
	padding: 30px;
	border: 1px solid #eee;
	box-shadow: 0 0 10px rgba(0, 0, 0, .15);
	font-size: 16px;
	line-height: 24px;
	font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
	color: #555;
	}

	.invoice-box table {
	width: 100%;
	line-height: inherit;
	text-align: left;
	}

	.invoice-box table td {
	padding: 5px;
	vertical-align: top;
	}

	.invoice-box table tr td:nth-child(2) {
	text-align: right;
	}

	.invoice-box table tr.top table td {
	padding-bottom: 20px;
	}

	.invoice-box table tr.top table td.title {
	font-size: 45px;
	line-height: 45px;
	color: #333;
	}

	.invoice-box table tr.information table td {
	padding-bottom: 40px;
	}

	.invoice-box table tr.heading td {
	background: #eee;
	border-bottom: 1px solid #ddd;
	font-weight: bold;
	}

	.invoice-box table tr.details td {
	padding-bottom: 20px;
	}

	.invoice-box table tr.item td{
	border-bottom: 1px solid #eee;
	}

	.invoice-box table tr.item.last td {
	border-bottom: none;
	}

	.invoice-box table tr.total td:nth-child(2) {
	border-top: 2px solid #eee;
	font-weight: bold;
	}

	@media only screen and (max-width: 600px) {
	.invoice-box table tr.top table td {
	width: 100%;
	display: block;
	text-align: center;
	}

	.invoice-box table tr.information table td {
	width: 100%;
	display: block;
	text-align: center;
	}
	}

	/ RTL /
	.rtl {
	direction: rtl;
	font-family: Tahoma, 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
	}

	.rtl table {
	text-align: right;
	}

	.rtl table tr td:nth-child(2) {
	text-align: left;
	}
	</style>
	</head>

	<body>
	<div class="invoice-box">
	<table cellpadding="0" cellspacing="0">
	<tr class="top">
	<td colspan="2">
	<table>
	<tr>
	<td class="title">
	<img src="https://www.sparksuite.com/images/logo.png" style="width:100%; max-width:300px;">
	</td>

	<td>
	Invoice #: 123<br>
	Created: January 1, 2015<br>
	Due: February 1, 2015
	</td>
	</tr>
	</table>
	</td>
	</tr>

	<tr class="information">
	<td colspan="2">
	<table>
	<tr>
	<td>
	Sparksuite, Inc.<br>
	12345 Sunny Road<br>
	Sunnyville, CA 12345
	</td>

	<td>
	Acme Corp.<br>
	John Doe<br>
	[email protected]
	</td>
	</tr>
	</table>
	</td>
	</tr>

	<tr class="heading">
	<td>
	Payment Method
	</td>

	<td>
	Check #
	</td>
	</tr>

	<tr class="details">
	<td>
	Check
	</td>

	<td>
	1000
	</td>
	</tr>

	<tr class="heading">
	<td>
	Item
	</td>

	<td>
	Price
	</td>
	</tr>

	<tr class="item">
	<td>
	Website design
	</td>

	<td>
	$300.00
	</td>
	</tr>

	<tr class="item">
	<td>
	Hosting (3 months)
	</td>

	<td>
	$75.00
	</td>
	</tr>

	<tr class="item last">
	<td>
	Domain name (1 year)
	</td>

	<td>
	$10.00
	</td>
	</tr>

	<tr class="total">
	<td></td>

	<td>
	Total: $385.00
	</td>
	</tr>
	</table>
	</div>
	</body>
	</html>

view raw gistfile1.txt hosted with

by GitHub

Test out the Invoice to PDF conversion in the DEMO on api2pdf.com by copying and pasting the HTML. The resulting PDF should look like the following:

Api2Pdf’s goal is to make the experience of generating PDFs for application developers not completely miserable. You can use Api2Pdf as your invoice / receipt PDF API by converting HTML to PDF at very low cost. Api2Pdf let’s you generate invoices and receipts on AWS Lambda.

Read our docs and grab an API key to get started in minutes.