wkhtmltopdf setup guide with KnpLabs Snappy support on Debian

This document will show you how to get wkhtmltopdf working on Debian using KnpLabs Snappy. If you try and install from distribution you won’t get some of the latest features of wkhtmltopdf like {shell}–javascript-delay{/shell}. This guide will help you install the latest version {shell}0.11.0 rc1{/shell}. This guide assumes you have LAMP already installed and that you can run {shell}sudo{/shell}.

1. Installing dependencies

Before you install you will need to have X11, gcc and openssl installed.

sudo aptitude install openssl build-essential xorg libssl-dev libxrender-dev

1	sudo aptitude install openssl build-essential xorg libssl-dev libxrender-dev

2. Getting the source

The bleeding edge build from git didn’t work for me so let’s download the latest stable release build.

Let’s make a temp directory

mkdir ~/temp && cd ~/temp;

1	mkdir ~/temp && cd ~/temp;

Download and extract the code by running

wget https://wkhtmltopdf.googlecode.com/files/wkhtmltopdf-0.11.0_rc1.tar.bz2;
tar -xvf wkhtmltopdf-0.11.0_rc1.tar.bz2;
ln -s wkhtmltopdf-0.11.0_rc1 wkhtmltopdf;

wget https://wkhtmltopdf.googlecode.com/files/wkhtmltopdf-0.11.0_rc1.tar.bz2;

tar -xvf wkhtmltopdf-0.11.0_rc1.tar.bz2;

ln -s wkhtmltopdf-0.11.0_rc1 wkhtmltopdf;

Be sure to change the version number to the latest source release.

3. Installing QT

Before you can compile wkhtmltopdf you need to have QT installed, again you have two options: You can install the QT from your distribution, this will be fast but your wkhtmltopdf build will not have all the features of the static build, or you can compile QT your self, this takes a long time but you will get all the features.

NOTE: I would suggest installing from distribution (3.b). I tried installing from source and it didn’t work.

3.a Installing QT from your distribution

sudo aptitude install libqt4-dev qt4-dev-tools

1	sudo aptitude install libqt4-dev qt4-dev-tools

You must now run qmake in the wkhtmltopdf folder.

cd wkhtmltopdf;
sudo qmake-qt4;

1 2	cd wkhtmltopdf; sudo qmake-qt4;

3.b Installing QT yourself

First check out the source

git clone git://gitorious.org/+wkhtml2pdf/qt/wkhtmltopdf-qt.git wkhtmltopdf-qt;
cd wkhtmltopdf-qt;
git checkout staging;
QTDIR=. ./bin/syncqt;

git clone git://gitorious.org/+wkhtml2pdf/qt/wkhtmltopdf-qt.git wkhtmltopdf-qt;

cd wkhtmltopdf-qt;

git checkout staging;

QTDIR=. ./bin/syncqt;

Qt must be configured, a good set of configuration options for qt can found by looking at the output of

cat ../wkhtmltopdf/static_qt_conf_base ../wkhtmltopdf/static_qt_conf_linux | sed -re 's/#.*//';
./configure -nomake tools,examples,demos,docs,translations -opensource -prefix "../wkqt";

1 2	cat ../wkhtmltopdf/static_qt_conf_base ../wkhtmltopdf/static_qt_conf_linux \| sed -re 's/#.*//'; ./configure -nomake tools,examples,demos,docs,translations -opensource -prefix "../wkqt";

And Qt compiled and installed (this will take a while)

sudo make -j3;
sudo make install;
cd ..;

sudo make -j3;

sudo make install;

cd ..;

You must now run qmake in the wkhtmltopdf folder.

cd wkhtmltopdf;
../wkqt/bin/qmake;

1 2	cd wkhtmltopdf; ../wkqt/bin/qmake;

4. Compiling and installing wkhtmltopdf

Now all you need to do is compile and install wkhtmltopdf

sudo make;
sudo make install;

1 2	sudo make; sudo make install;

5. You man need a few symbolic links

For some reason Debian wants execute from

/usr/local/bin/wkhtmltopdf

1	/usr/local/bin/wkhtmltopdf

. So do the following to fix the issue.

ln -s /bin/wkhtmltopdf /usr/local/bin/wkhtmltopdf
ln -s /bin/wkhtmltoimage /usr/local/bin/wkhtmltoimage

1 2	ln -s /bin/wkhtmltopdf /usr/local/bin/wkhtmltopdf ln -s /bin/wkhtmltoimage /usr/local/bin/wkhtmltoimage

6. Check to see if it works

Run the following. If you get the error {shell}”Cannot connect to X server”{/shell} then continue to number 7.

wkhtmltopdf http://www.google.com test.pdf

1	wkhtmltopdf http://www.google.com test.pdf

7. Fixing “Cannot connect to X server”

We need to run it headless on a ‘virtual’ x server. We will do this with a package called xvfb.

sudo aptitude install xvfb

1	sudo aptitude install xvfb

8. Create a shell script wrapper for wkhtmltopdf

We need to write a little shell script to wrap wkhtmltopdf in xvfb. Make a file called wkhtmltopdf.sh using the following:

echo 'xvfb-run -a -s "-screen 0 595x842x16" /bin/wkhtmltopdf $*' >> /usr/bin/wkhtmltopdf.sh;

1	echo 'xvfb-run -a -s "-screen 0 595x842x16" /bin/wkhtmltopdf $*' >> /usr/bin/wkhtmltopdf.sh;

Now let’s make it executable.

sudo chmod a+x /usr/bin/wkhtmltopdf.sh

1	sudo chmod a+x /usr/bin/wkhtmltopdf.sh

Give step 6 a try again.

Using KnpLabs Snappy

Here I will show you how to use KnpLabs Snappy. Snappy is a PHP5 library allowing thumbnail, snapshot or PDF generation from a url or a html page. It uses the excellent webkit-based wkhtmltopdf and wkhtmltoimage available on OSX, linux, windows.

1. Download snappy from github

wget https://github.com/KnpLabs/snappy/archive/master.tar.gz && tag -xvf master.tar.gz;

1	wget https://github.com/KnpLabs/snappy/archive/master.tar.gz && tag -xvf master.tar.gz;

2. Copy the {shell}snappy-master/src{/shell} folder to your webroot.

3. Create a html file for your template

Save this file as {shell}hello.html{/shell} in your webroot. This will be used as your template. It contains a chart from hicharts.js.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Page Title</title>
    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script src="http://code.highcharts.com/highcharts.js"></script>
    <script src="http://code.highcharts.com/modules/exporting.js"></script>
</head>
<body>
    <div id="container" style="width: 595px; height: 842px; margin: 0 auto"></div>
</body>
<script>
$(function(){
        var chart;
    $(document).ready(function() {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'column',
                animation: false
            },
            plotOptions: {
                series: {
                    animation: false
                },
                column: {
                    stacking: 'normal'
                }
            },
            title: {
                text: 'Total fruit consumtion, grouped by gender'
            },
            xAxis: {
                categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
            },
            yAxis: {
                allowDecimals: false,
                min: 0,
                title: {
                    text: 'Number of fruits'
                }
            },
            tooltip: {
                formatter: function() {
                    return '<b>'+ this.x +'</b><br/>'+
                        this.series.name +': '+ this.y +'<br/>'+
                        'Total: '+ this.point.stackTotal;
                }
            },
            series: [{
                name: 'John',
                data: [5, 3, 4, 7, 2],
                stack: 'male'
            }, {
                name: 'Joe',
                data: [3, 4, 4, 2, 5],
                stack: 'male'
            }, {
                name: 'Jane',
                data: [2, 5, 6, 2, 1],
                stack: 'female'
            }, {
                name: 'Janet',
                data: [3, 0, 4, 4, 3],
                stack: 'female'
            }]
        });
    });
});
</script>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Page Title</title>

</head>

<body>

</body>

$(function(){

var chart;

$(document).ready(function() {

chart = new Highcharts.Chart({

chart: {

renderTo: 'container',

type: 'column',

animation: false

plotOptions: {

series: {

animation: false

column: {

stacking: 'normal'

}

title: {

text: 'Total fruit consumtion, grouped by gender'

xAxis: {

categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']

yAxis: {

allowDecimals: false,

min: 0,

title: {

text: 'Number of fruits'

}

tooltip: {

formatter: function() {

return '<b>'+ this.x +'</b><br/>'+

this.series.name +': '+ this.y +'<br/>'+

'Total: '+ this.point.stackTotal;

}

series: [{

data: [5, 3, 4, 7, 2],

stack: 'male'

}, {

data: [3, 4, 4, 2, 5],

stack: 'male'

}, {

data: [2, 5, 6, 2, 1],

stack: 'female'

}, {

data: [3, 0, 4, 4, 3],

stack: 'female'

}]

});

</script>

</html>

Notes

In order for wkhtmltopdf to correctly print the chart, it is advised to remove any animations on hicharts.js objects. You will need to set the {javascript}animation{/javascript} property to false for both the {javascript}Chart{/javascript} object and the {javascript}plotOptions.series{/javascript} object.

chart: {
    renderTo: 'container',
    type: 'column',
    animation: false
},
plotOptions: {
    series: {
        animation: false
    },
    column: {
        stacking: 'normal'
    }
},

chart: {

renderTo: 'container',

type: 'column',

animation: false

plotOptions: {

series: {

animation: false

column: {

stacking: 'normal'

}

4. Create the following php file in your webroot.

Save this file as {shell}generate-pdf.php{/shell} in your webroot.

<?php

require_once 'src/autoload.php';

use KnpSnappyPdf;

$snappy = new Pdf();
$snappy->setBinary('/usr/bin/wkhtmltopdf.sh');
$snappy->setOption('javascript-delay', 500);
header('Content-Type: application/pdf');
header('Cache-Control: public, must-revalidate, max-age=0'); // HTTP/1.1
header('Pragma: public');
header('Expires: Sat, 26 Jul 1997 05:00:00 GMT'); // Date in the past
header('Last-Modified: '.gmdate('D, d M Y H:i:s').' GMT');
header('Content-Disposition: inline; filename="hello.pdf";');
echo $snappy->getOutput('hello.html');

?>

<?php

require_once 'src/autoload.php';

use KnpSnappyPdf;

$snappy = new Pdf();

$snappy->setBinary('/usr/bin/wkhtmltopdf.sh');

$snappy->setOption('javascript-delay', 500);

header('Content-Type: application/pdf');

header('Cache-Control: public, must-revalidate, max-age=0'); // HTTP/1.1

header('Pragma: public');

header('Expires: Sat, 26 Jul 1997 05:00:00 GMT'); // Date in the past

header('Last-Modified: '.gmdate('D, d M Y H:i:s').' GMT');

header('Content-Disposition: inline; filename="hello.pdf";');

echo $snappy->getOutput('hello.html');

Notes

Note the use of {php}javascript-delay{/php}:

$snappy->setOption('javascript-delay', 500);

1	$snappy->setOption('javascript-delay', 500);

This will allow you to delay the printing of the pdf for a specified amout of time defined by ms. In this case the delay is set to {php}500ms{/php}. Also the {php}Content-Disposition{/php} is set to {php}inline{/php}. This will allow the pdf to show withing the browser window if the user has a pdf plugin installed. Supported browsers are Chrome and Safari. If the user does not have a supported browser they will be presented with a file download diaglog.

header('Content-Disposition: inline; filename="hello.pdf";');

1	header('Content-Disposition: inline; filename="hello.pdf";');

Resources

Date

December 3, 2012

Time

1:26 am

Category

Uncategorized

Fix XAMPP HostnameError001 on Mac OS X

Today when starting up XAMPP in Snow Leopard I ran across this problem where I was getting a HostnameError001 popup. So the first thing that I thought of was to cross check my hostname with my computer name. Turns out that for me this was the problem.
(more…)

Date

April 29, 2011

Time

3:39 pm

Category

Uncategorized

Tags

Tags: howto, Mac, programming, XAMPP

Too many carousel items in jCarousel Lite v1.0.1

I’ve been working on a project and found the need for a carousel. After some searching I found a great script called jCarousel Lite. I found a bug with the implementation of jCarousel Lite v1.0.1 and how it uses selectors to get the number of li’s in a carousel. In my implementation I’m using list items within each carousel item. After looking at your code the following would result in jCarousel thinking that it has 3 items in the carousel when really there is only 1.

<div id="carousel">
  <ul>
    <li class="carouselItem">
      <ul>
        <li></li>
        <li></li>
      </ul>
    </li>
  </ul>
</div>

<ul>

<ul>

</ul>

</li>

</ul>

</div>

The current implementation of jCarousels use of $(‘li’, ul) in the constructor will return all nested li’s regardless of how deeply nested they are in the dom structure. To handle this issue I’ve modified a few lines of code in the constructor to fix this issue. Feel free to apply these changes if you see fit.

Here’s the original snippet:

var div = $(this), ul = $("ul", div), tLi = $("li", ul), tl = tLi.size(), v = o.visible;

if(o.circular) {
    ul.prepend(tLi.slice(tl-v-1+1).clone())
      .append(tLi.slice(0,v).clone());
    o.start += v;
}

var li = $("li", ul), itemLength = li.size(), curr = o.start;

var div = $(this), ul = $("ul", div), tLi = $("li", ul), tl = tLi.size(), v = o.visible;

if(o.circular) {

ul.prepend(tLi.slice(tl-v-1+1).clone())

.append(tLi.slice(0,v).clone());

o.start += v;

}

var li = $("li", ul), itemLength = li.size(), curr = o.start;

Here is my modified version:

var div = $(this), ul = div.children(‘ul’), tLi = ul.children(‘li’), tl = tLi.size(), v = o.visible;

if(o.circular) {
    ul.prepend(tLi.slice(tl-v-1+1).clone())
      .append(tLi.slice(0,v).clone());
    o.start += v;
}
var li = ul.children(‘li’), itemLength = li.size(), curr = o.start;

var div = $(this), ul = div.children(‘ul’), tLi = ul.children(‘li’), tl = tLi.size(), v = o.visible;

if(o.circular) {

ul.prepend(tLi.slice(tl-v-1+1).clone())

.append(tLi.slice(0,v).clone());

o.start += v;

}

var li = ul.children(‘li’), itemLength = li.size(), curr = o.start;

Date

March 30, 2011

Time

8:11 pm

Category

Uncategorized

Tags

Tags: javascript, jQuery, programming

Fixing WordPress update issue for Mac localhost

Today I was trying to put in some work on my custom theme when I noticed that a few of my plugins were out-of-date. I proceeded to use the auto update feature and kept getting a write permission error during the update process. After some searching I found this great little tidbit that helped fix my issue. Go to the root of your WordPress site and run the following in Terminal:
chmod -R go+w *

You may have issues with permissions when trying to upload, import, etc. You can correct this by doing a chmod on your sites folder and subfolders.

From the terminal navigate to your sites folder and run something like the following…

chmod -R go+w *

This will grant group and others write permissions. If you need higher local security, then feel free to grant permissions by a more restrictive method.

This information was gathered from several sources. If you have problems or need additional information, I would reference my sources for this article. Please post additional recommendations and issues in the forum comments associated with this article.

http://www.angry-fly.com/index.cfm/2007/10/26/Fix-for-MySQL-on-Leopard
http://warker.com/2006/09/16/wordpress-os-x-install-tips/
http://remysharp.com/2007/10/27/lamp-in-leopard-osx-105-php5-and-apache-22/

[via tech-recipes]

Date

January 20, 2011

Time

3:25 pm

Category

Uncategorized

Tags

Tags: howto, WordPress

Zooming in Office for Mac 2008

This is a great tip for zooming in Word, Excell, and PowerPoint. It works for Office for Mac 2004 and 2008. The only application it does not work with is Entourage. Update: Also works for Office for Mac 2011. Unfortunately it does not work for Outlook for Mac.

How To:

Hold down Command and Control and use the Scroll Wheel on your mouse.

Hold down Command and Control and Drag your fingers up/down on a scroll-enabled trackpad.

From Rob Griffiths, Macworld.com:

Microsoft’s Office 2004 suite is no exception—Word, Excel, and PowerPoint (but not Entourage) all feature a View -> Zoom menu item. But using it is a bit time consuming. First you choose the menu, then you pick a pre-set zoom level, or enter your own value, and then click OK. You can also put a button on the toolbar which does something similar. Still, it’s hardly a fast and fluid operation.

Enter the mouse. In all three of the above applications, if you hold down Command and Control and then move the scroll wheel on your mouse (or drag your fingers on a scrolling-enabled trackpad), you can rapidly increase or decrease the zoom level. Move the wheel up, and you’ll zoom in; move it down, and you’ll zoom out. The amount the zoom changes with each tick of the scroll wheel varies between the applications. Word seems to go in 10-percent steps; Excel uses 15-percent increments; and PowerPoint steps through the fixed zoom levels (including ‘fit,’ which means I had a stop at 152 percent) in its Zoom menu. Excel and PowerPoint are also limited to 400-percent maximum zoom, while Word will go up to 500 percent.

Set Office 2004 zoom levels via mouse [via Macworld]

Enjoy

Date

June 9, 2009

Time

4:29 pm

Category

general

Tags

Tags: general, howto

InteractivePNG – AS3 Class to handle hit areas for transparent PNG's

Moses Gunesch, creator of Fuse Kit and ZigoEngine , has developed an AS3 Class which handles mouse interactions when dealing with transparent PNG’s.

Here is the theory:
If you have a PNG (one that contains transparent areas) embedded inside of a MovieClip button, the rectangle of the image acts as the hitArea of the MovieClip. In order for the hitArea to only be defined by visible areas of the image, you would normally have to create a custom mask in order to hide the transparent areas of the PNG. This AS3 Class allows you to specify an alpha tolerance (0=transparent, 255=completely opaque), that will allow you to selective exclude the transparent areas from your hitArea based on the value that you give it. This is a very simple concept, but an intricate implementation.

The project is open-sourced under the MIT Open Source License. Go and check it out:

Date

February 2, 2009

Time

5:27 pm

Category

Uncategorized

Tags

Tags: ActionScript, Flash, opensource, png