PDF Document
How To Convert HTML to PDF

PDF documents are everywhere and are the best way for printing documents from the web. Imagine if you were able to convert a web page to a PDF document! I found an excellent tool for converting HTML web pages to PDF. I started using this tool with our largest clients, and have now moved it to wherever else I need the functionality, including my own web sites.

The tool I use to convert HTML to PDF is wkhtmltopdf. This tool renders a PDF document by running the HTML, CSS, and JavaScript code through the open source webkit rendering engine. Webkit is the engine behind the popular browsers Safari and Google Chrome.

How To Install

On Windows, the installation is fairly simple. From the Google Code website, download the windows installer executable and install on the computer where you would like to use it. Once the install is complete, the software is ready to use.

On Linux, wkhtmltopdf can be installed by downloading the code to the web server, then running any of the popular package management software to assist in the installation. With Ubuntu, wkhtmltopdf is included in their package repository and is as simple to install and update as any other software.

How To Create PDF Files

The easiest way to jump in and create PDF files is using the command line. This first example demonstrates how to convert a popular website to a PDF file. Navigate to the directory where the HTML to PDF conversion software was installed, then type the following:

wkhtmltopdf www.google.com google.pdf

The command above starts by specifying the name of the program to run, then adds a couple of parameters. The first parameter is the web address to load and convert. The second parameter is the name of the PDF file to save to disk. The full list of parameters can be found in the readme file in the install package.

Example Integration With PHP

The wkhtmltopdf software can do much more than the simple command line example above. Let's look at a way to convert a dynamic web page to PDF. This first piece of code handles the html part of the process.

  1. <a href="javascript:printPDF();"><img src="/images/pdf.gif" border="0" /></a>
  2. <div id="article"></div>

The "a" tag creates a link to run the JavaScript function "printPDF()". The printPDF function is detailed below.

  1. function printPDF() {
  2.         var h = '<style></style>'+$('#article').html();
  3.         var html = '<html><body><scr'+'ipt>';
  4.         html += 'var form = document.createElement("form");';
  5.         html += 'form.setAttribute("method","post");';
  6.         html += 'form.setAttribute("action","/ajax/pdf/");';
  7.         html += 'var h = document.createElement("input");';
  8.         html += 'h.setAttribute("type","hidden");';
  9.         html += 'h.setAttribute("name","html");';
  10.         html += 'h.setAttribute("value","'+escape(h)+'");';
  11.         html += 'form.appendChild(h);';
  12.         html += 'document.body.appendChild(form);';
  13.         html += 'form.submit();';
  14.         html += '</sc'+'ript></body></html>';
  15.         var w = window.open('','');
  16.         w.document.write(html);
  17.         w.document.close();
  18. }

The function above pulls the html from the page and stores it in a local variable. Then, HTML is added to the variable "html" and will run JavaScript code to post the HTML code to convert to PDF to the web server. At the end of the function, a new window is opened, then the HTML code to be converted will be posted to the server. The PHP code to handle the conversion request is detailed below.

  1. class AjaxController extends Zend_Controller_Action {
  2.         public function pdfAction() {
  3.                 $this->_helper->layout()->disableLayout();
  4.                 $this->_helper->viewRenderer->setNoRender();
  5.                 if ($this->getRequest()->isPost() {
  6.                         $filepath = '/www/html/';
  7.                         $pdfpath = '/www/pdf/';
  8.                         $filename = date('YmdHisu');
  9.                         $html = urldecode($_POST['html']);
  10.                         file_put_contents($filepath.$filename.'.html',$html);
  11.                         $pdfcmd = 'wkhtmltopdf.sh '.$filepath.$filename.'.html '.$pdfpath.$filename.'.pdf --disable-javascript';
  12.                         exec($pdfcmd);
  13.                         if ($fd = fopen($pdfpath.$filename.'.pdf','r')) {
  14.                                 $fsize = filesize($pdfpath.$filename.'.pdf');
  15.                                 header('Content-type: application/pdf');
  16.                                 header('Content-length: '.$fsize);
  17.                                 header('Cache-control: private');
  18.                                 while(!feof($fd)) {
  19.                                   $buffer = fread($fd, 2048);
  20.                                   echo $buffer;
  21.                                 }
  22.                                 fclose($fd);
  23.                         }
  24.                         unlink($filepath.$filename.'.html');
  25.                         unlink($pdfpath.$filename.'.pdf');
  26.                 }
  27.         }
  28. }

The above PHP code handles the html posted from the web page and converts it to a PDF file. You may notice the strange layout of this PHP code. Here, I am using the Zend Framework to serve pages for my web site.

The standard layouts are disabled so the PDF file can be output without the template code being rendered. Then, then HTML code from the web page is saved to a HTML file on the server. In the middle of this code block, you can see wkhtmltopdf being called with the same parameters as in the command line example, but a 3rd parameter is added. The 3rd parameter disables any JavaScript running in the posted code, just in case someone manages to add some extra code to the request. Next, the PDF file is buffered to the browser window with the PDF type in the header. Last, the HTML and PDF files created on the server are deleted.

That's the whole process! I have found this software to being incredibly useful, and I hope you do as well.

Tags: 
HTML
PDF
PHP
wkhtmltopdf
Categories: 
Development

Related Posts

  • Database Table Design

    Introduction to SQL Statements

    • Sun, 2011-09-11 18:25

    SQL is how you communicate with a relational database system, such as SQL Server, MySQL, or SQL Anywhere. SQL stands for Structured Query Language

  • SQL Statement

    How To Secure Your Website: SQL Injection

    • Sun, 2011-09-11 18:59

    SQL Injection is one of the most common, overlooked, and potentially destructive attacks on modern websites. When SQL code is posted to the web server via an input field and the code results in an unintended result, your have a SQL Injection attack. This sort of attack can be used for anything from viewing unintended data, bypassing authentication, or even removing data from the database.

  • Internet Header

    Top 5 Must Read Development Blogs

    • Sun, 2011-09-11 19:11

    Have you been looking for some excellent development blogs to read? The blogs listed below are some of my favorites and I read them every day.

  • Javascript Code

    Use jQuery To Bring Your Site To Life

    • Sun, 2011-09-11 19:22

    If you're not using a Javascript framework, you are writing too much code! When I first started learning how to write Javascript several years ago, I didn't know these frameworks existed. A couple a years ago, I learned about jQuery and how to utilize it to speed up my development.

  • Default Drupal 7 Installation

    Top 10 Must Have Modules For Every Drupal Site

    • Sun, 2011-09-11 19:26

    As many of you already know, Drupal is one of the best and most popular content management systems for web sites. Drupal has an excellent community of developers and contributors. As a result, there are a ton of modules available.

Post new comment

© 2012 Webmaster Sessions