How to use html2pdf

In this tutorial..
I couldn’t really think of  a good introduction so bear with me if I’m back to using that boring introduction.
Anyway, here’s what you’re going to learn in this tutorial:

  • Basics of using html2pdf
  • Using css with html2pdf
  • Random stuff – things I found out while trying it on my sandbox/test folder

Html2pdf is a php class which you can use to generate reports or pdf files in your php application.
It’s pretty much like dompdf but I think its simpler and easier to learn. I already created 2 tutorials on dompdf before so if you want to learn how to use it, you can visit the links below:

How to use dompdf

How to use dompdf with css

 

Requirements

 

Assumptions

I assume that you already using php and css.

 

Procedure

As usual, you have to prepare your test folder and put all the files needed in this tutorial.

Next, include the html2pdf class in the file where you’re going to work:

require_once('html2pdf/html2pdf.class.php');

Then declare an object of the html2pdf class.

$html2pdf = new HTML2PDF('P', 'A4', 'en');

As you can see from the above code, it requires 3 arguments:

  • Orientation – page orientation is either landscape or portrait. The example above produces a pdf with the portrait orientation. If you want to produce a pdf in landscape orientation you can use ‘L’.
  • Page size – I don’t know much about this, but I think A4 is the most common.
  • Language – This is an optional argument, you might not as well include it.

 

Next is the actual generating of pdf. Here’s an example of placing an image into the pdf file. Always remember that the writeHTML function in html2pdf takes up 1 argument, and that is the html that you want to output in the pdf file.

$html2pdf->writeHTML("
		<img src=bin.png>
		");

Another is that you can actually use the same object, in this case the variable $html2pdf as many times as you want:

$html2pdf->writeHTML("
		<img src=bin.png>
		");
		
$html2pdf->writeHTML("
		<img src=search.png>
		");

The 2 images will get outputted. As you can see from the screenshot below. Although we can just lump those 2 images together in a single writeHTML() call. I just used it to emphasize that we can actually call the writeHTML() method as many times as we wish.

image

Finally, we specify the filename for the pdf file and render it on the screen:

$html2pdf->Output('random.pdf');

If the browser doesn’t have a pdf plugin, the filename that we specified here will be its filename.

 

Next, we will try to use the knowledge that we got so far to style and position things in the pdf just like a normal html. That is by using css:

$html2pdf->writeHTML("
<style>
	img{
	float:right;
	}
</style>
		
<img src=bin.png>
		");

$html2pdf->writeHTML("<img src=search.png>");

Now, try to guess the output…

I don’t really like taking screenshots in full sized images so here’s a minified version of the pdf rendered in Chrome:

image

Anything which comes after the css is getting styled. So if you try to do it the other way around. That is by placing the second image before the css. It will look like this:

image

You might have guessed but you can pretty much include any html. That includes forms:

image

That’s the output when I did something like this:

$html2pdf->writeHTML("
		
		<fieldset id=crow>
		<p>
		Firstname
		<input type=text name=fname>
		</p>
		<p>
		Course:
		<input type=text name=course>
		</p>
		<p>
		<input type=submit name=btn_submit value=submit>
		</p>
		</fieldset>
		
		");

That’s a really crappy form but you can always style it using css to make it look awesome.

 

Conclusion

I guess that’s it for this tutorial. If you want to learn more be sure to try things out on your own. I assure you that’s the best way to learn. Don’t just randomly copy code from the internet and call it a day.

2 thoughts on “How to use html2pdf

  1. hey.. I’m trying to implement this on my website. this will be my 3rd attempt with other techonologies. I’m not sure if its my ff and mac combination, or wordpress, but, I can’t get it working.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s