Blog
Free Bootstrap 4 Packing Slip HTML Template
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.
| <html lang="en"> | |
| <head> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"> | |
| </head> | |
| <body> | |
| <main role="main" class="container"> | |
| <div class="row"> | |
| <div class="col-8"> | |
| <h1 class="text-center">Api2Pdf</h1> | |
| <img src="https://www.api2pdf.com/wp-content/uploads/2018/07/600x150.png" /> | |
| <h5 class="text-left" style="padding-top:10px;">Message from Purchaser</h5> | |
| <p class="text-left">Api2Pdf is a powerful PDF generation API with no rate limits or file size constraints. Generate PDFs from | |
| HTML, URLs, images, office documents, and more. Merge PDFs together. Api2Pdf runs on AWS Lambda, a serverless | |
| architecture powered by Amazon to scale to millions of requests while being up to 90% cheaper than alternatives. | |
| The REST API provides endpoints for WKHTMLTOPDF, Headless Chrome, LibreOffice, and Merge PDFs. Learn | |
| more at | |
| <a href="https://www.api2pdf.com">https://www.api2pdf.com</a> | |
| </p> | |
| </div> | |
| <div class="col-4 border border-dark"> | |
| <img src="http://www.api2pdf.com/wp-content/uploads/2018/07/download-1.png" /> | |
| <h4>Order Information</h4> | |
| <p class="lead">Order Number: 123456</p> | |
| <p>Purchased: 01/01/2018</p> | |
| <p>Shipped: 01/01/2018</p> | |
| <h4>Shipping To</h4> | |
| <p>John Doe</p> | |
| <p>123 Angel Blvd</p> | |
| <p>APT 7</p> | |
| <p>New York, NY 11111</p> | |
| <p>United States</p> | |
| </div> | |
| </div> | |
| <hr/> | |
| <table class="table table-bordered"> | |
| <thead> | |
| <tr> | |
| <th scope="col">Item Code</th> | |
| <th scope="col">Item Name</th> | |
| <th scope="col">Quantity</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td scope="row">001</th> | |
| <td>Can of Beer</td> | |
| <td>1</td> | |
| </tr> | |
| <tr> | |
| <td scope="row">002</th> | |
| <td>T-Shirt - SMALL</td> | |
| <td>3</td> | |
| </tr> | |
| <tr> | |
| <td scope="row">003</th> | |
| <td>Men's Jeans - SIZE 32</td> | |
| <td>1</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| <div class="row"> | |
| <div class="col-12"> | |
| <div class="card bg-faded"> | |
| <div class="card-header"> | |
| Return Policy | |
| </div> | |
| <div class="card-body"> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel mi sed est imperdiet tempus. Praesent ac ipsum lectus. In vel posuere nulla, eget mattis mi. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus nec ex sed risus feugiat sagittis. Vivamus egestas id neque auctor vulputate. Donec tincidunt, leo ut malesuada mattis, felis dolor lacinia enim, sit amet fermentum est turpis id augue. Vivamus rutrum aliquam ornare. Proin leo dolor, porta ut libero nec, ultricies tincidunt elit. Vivamus pharetra lacus augue, ut sagittis velit pellentesque vitae.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script> | |
| </body> | |
| </html> |
by
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.