Create PDF invoices with HTML5 and PhantomJS

Creating invoices in PDF is always a bit tricky: there are many libraries to create PDF documents with PHP, but most can't handle complex layouts and require a lot of memory and CPU time. Things like Unicode characters and line/page breaks are often difficult to program and the source of many bugs and memory problems. Using logos as vector graphics or embedding TrueType fonts is often required, but not possible with most libraries.

The good thing is that all these features are included in HTML5. Since most companies offer their invoices also in HTML, it would be great to convert them directly to PDF. Tools like html2ps and ps2pdf can produce PDFs with 200+ pages without problems, but only support HTML4 and some very limited CSS. Also, the layout is never the same as in a web browser.

So we need a real web browser to convert HTML pages to PDFs. From testing web applications, we know that PhantomJS is a headless WebKit browser that runs on the commandline and can automate things very easily. The great thing is that it can also create screenshots and PDFs with selectable texts and embedded fonts! So we can use all kinds of CSS (Truetype fonts, round borders, etc.), SVG images, DIVs and tables to create great looking invoices.

Here is a PhantomJS script that converts an HTML file into a PDF: 


// html2pdf.js
var page = new WebPage();
var system = require("system");
// change the paper size to letter, add some borders
// add a footer callback showing page numbers
page.paperSize = {
  format: "Letter",
  orientation: "portrait",
  margin: {left:"2.5cm", right:"2.5cm", top:"1cm", bottom:"1cm"},
  footer: {
    height: "0.9cm",
    contents: phantom.callback(function(pageNum, numPages) {
      return "<div style='text-align:center;'><small>" + pageNum +
        " / " + numPages + "</small></div>";
    })
  }
};
page.zoomFactor = 1.5;
// assume the file is local, so we don't handle status errors
page.open(system.args[1], function (status) {
  // export to target (can be PNG, JPG or PDF!)
  page.render(system.args[2]);
  phantom.exit();
});

Let's start the conversion: 


time phantomjs html2pdf.js invoice.html invoice.pdf
real    0m0.189s
user    0m0.096s
sys     0m0.020s

time html2ps invoice.html | ps2pdf - invoice.pdf
...
real    0m3.521s
user    0m0.656s
sys     0m0.208s
(phantomjs 1.6.1, html2ps 1.0b7, 3.4 GHz single core, QEMU)

Here is the example invoice.html containing a SVG logo, tables, a TrueType font and CSS styles:

And it gets a perfect PDF with 2 pages in less than 1 second:

The size of the PDF is 65 KB. Using LibreOffice for the conversion gives 130 KB, html2ps produces 8 KB without the logo and the fonts.

The source files and the target PDF can be downloaded here.

Note: manual page breaks can be added with: 

<div style="page-break-before:always;"></div>
or
<div style="page-break-after:always;"></div>

Note: Support for the WebOpenFontFormat (woff) will be available in future releases, so currently only TrueType fonts are supported.

Comments

Post a Comment

Popular posts from this blog

How to show only month and year fields in android Date-picker?

Image
Android default DatePicker show day/month/year fields but you have to customize this DatePicker as your requirements. Suppose that you want to show only month and year fields in android datepicker . To do this, you have to customize the Dialog DatePicker source code but it is not an easy task. In this tutorial I will show you a tricky way to solve this problem. Lets see how to show only month and year field in android DatePicker as a dialog.   Step to show only month and year fields in android date-picker: Some days ago I got this same problem and here I am trying to explain this in a sequential manner. I want to show a dialog datepicker when user click on an EditText. So if user click on EditText, A dialog datepicker will be invocked and it will show only month and year fields. To do this, at first we have to create a xml layout to hold the EditText fields. So create an android project and name it DatePickerExample. In the main.xml file just try to write this simple code....
Read more

How to construct a B+ tree with example

Image
A B+ tree contains n-1 search key values K1K2…….Kn-1 and have n pointers.   In a B+ tree the data are ordered  sequentially.  The leaf node may hold up to n pointers and must hold at least N/2 pointers. The root node must hold at least two pointers, unless the tree consists of only one node.  Now we construct a B+ tree. Construct a B+ tree for the following set of key values: (2,3,5,7,11,17,19,23,29,31) Assume that the tree is initially empty and values are added in ascending order. Construct a B+ tree where the pointer number is Four. Solution: When a node exceeds n-1 search key value then we split it into two nodes. First node contains (ceiling(n-1)/2) values.  2 nd node contains remaining node. Copy the smallest search key value of the second node to the parent node. Let's start, we know each node has N pointer and has N-1 search key values. In our example pointer number is 4, so the search key value is 4-1=3. So each node has 4 pointers and 3 search key val...
Read more

Conflict Serializability in database

Image
To maintains database state consistency we introduce serializability. Using serializability we can understand which schedule will ensure consistency, and which schedule will not. When we are capable of converting a concurrent schedule into a serial schedule then we cal it serializable schedule. A schedule is serializable if it is equivalent to a serial schedule. We divided this concepts into two parts 1. Conflict serializability  & 2. View serializability In this discussion I just clarify you the conflict serializability. Consider two instruction read, write and the data item A and B. When two instruction execute different data item such as read(A) and read(B), then we can swap the instruction without affecting the result of the schedule. But when the data item is equivalent to one another we need to consider following four condition.    a.   read (A ),    read ( A ).   they   don’t conflict.    b.   read ( Q),  ...
Read more