Intro

Software developers often have to deal with the real world in the form of shipping products. This is quite common with online shopping sites. Everyone is familiar with a packing slip that is included in the box they receive along with their delivery. As a developer, it is likely your responsibility to write code to generate a PDF for a packing slip. This PDF will tell the picker (the person who pulls the product off the shelves) which products to pull and place it in the box along with the items.

Important Points

There are many ways to design a packing slip and no one way is the best way. It all depends on your client needs. However, they all tend to have at least the following components:

• Order # clearly visible
• Name of the business with a logo or banner
• Date shipped / Date purchased
• Who and where to ship the item to
• Any special message included by the purchaser (sometimes known as a Gift Message).
• The list of items and their quantities
• Some kind of policy, business information

Packing Slip HTML Template

The following HTML template was put together with Bootstrap 4 and is easily and freely modifiable.

Image Sample:

Headless Chrome vs. wkhtmltopdf

The next step is to print the HTML to PDF. The easiest way to accomplish this is with either Headless Chrome or wkhtmltopdf. Api2Pdf provides you an extremely convenient HTML to PDF API to try out both endpoints. You can checkout the documentation here. Api2Pdf is built on AWS Lambda, convert HTML to PDF at massive scale (millions of requests) with no rate limits or file size limits.

The packing slip HTML template provided will work as-is if you print it to PDF with Headless Chrome. No special options are required. This link will show you the sample in PDF format as printed from Headless Chrome: link to Chrome PDF sample.

However, wkhtmltopdf is not as friendly with this HTML. If you print the HTML above to wkhtmltopdf, you see something like this PDF Sample.

Therefore, in this instance I recommend using the Headless Chrome endpoint. Or you can fight with wkhtmltopdf to adjust the styling to get it to where you need it to be.

Barcodes

This is optional, but it is not unusual to include a barcode or QR code on the packing slip. Api2Pdf offers an easy-to-use barcode generation API endpoint for ZXING (Zebra Crossing). You can include a GET request to the barcode generation in the HTML in place of the <img src=”…link to barcode generation” /> instead of the hard coded sample provided in the HTML.

Tags: bootstrap 4, html-to-pdf, packing slip, pdf, pdf-generation, shipping label