Pdfcrowd Blog

Convert HTML To PDF in PHP The Easy Way

2011-04-18T00:00:00+02:00

In this tutorial you will learn how to easily convert web pages and raw HTML code to PDF in your PHP applications. We will use the Pdfcrowd API for PDF generation. The API offers these benefits:

The API is easy to use and fully supports HTML/CSS2/JavaScript.
The integration takes only a few minutes.
No third-party libraries are needed, just a single tiny PHP file.
It does not consume CPU/memory on your computer, PDFs are created in the Pdfcrowd servers.

Introduction

Let's start with an example:

<?php
require 'pdfcrowd.php';

$client = new Pdfcrowd("username", "apikey");
$pdf = $client->convertURI('http://bbc.co.uk/');
?>

This code converts bbc.co.uk and stores the generated PDF to a string. You can save the result to a file or you can stream it to the browser, which we will discuss in detail shortly. You can click the thumbnail to open the generated PDF file:

Besides web pages, you can also convert a local HTML file or an HTML string:

<?php
$pdf_from_file = $client->convertFile('/path/to/your/file.html');
$pdf_from_html = $client->convertHtml('<b>bold</b> and <i>italic</i>');
?>

It is also possible to save the PDF directly to a file by passing a file pointer as the second argument:

<?php
$client->convertURI('http://example.com/', fopen('example.pdf', 'wb'));
?>

Basic Customization

Now that you know the basics, you may want to customize the generated PDF. Let's change the page format to Legal with half-inch margins:

<?php
$client->setPageWidth("8.5in");
$client->setPageHeight("14in");
$client->setHorizontalMargin("0.5in");
$client->setVerticalMargin("0.5in");
?>

You can use metric units as well, for instance the following code sets A4:

<?php
$client->setPageWidth("210mm");
$client->setPageHeight("297mm");
?>

You can also specify the appearance of the PDF when it is opened in a viewer:

<?php
$client->setInitialPdfZoomType(Pdfcrowd::FIT_PAGE);
$client->setPageLayout(Pdfcrowd::CONTINUOUS);
?>

The API provides many other options including password protection and fully customizable page headers and footers. You can find the complete PHP API reference here.

Error Handling

The API should not never return a corrupted PDF. If the service can't for some reason generate a valid PDF then an instance of PdfcrowdException is thrown. Therefore it is highly recommended to enclose your code within a try-catch block:

<?php
try {
    // ...
}
catch(PdfcrowdException $why) {
    echo "FAILED: " . $why;
}
?>

Server Side PDF Generation

In this section we will show two common PDF generation scenarios.

Generate PDF and send it to the browser

The following code converts mydomain.com to PDF and sends it as a response:

<?php

require 'pdfcrowd.php';

try {

    $client = new Pdfcrowd("username", "apikey");
    $pdf = $client->convertURI("http://mydomain.com/");

    header("Content-Type: application/pdf");
    header("Cache-Control: no-cache");
    header("Accept-Ranges: none");
    header("Content-Disposition: inline; filename=\"mydomain.pdf\"");

    echo $pdf;

}
catch(PdfcrowdException $why) {
    echo "Can't create PDF: ".$why."\n";
}

?>

To convert an HTML string you can use convertHtml() instead of convertURI():

<?php
$pdf = $client->convertHtml("<html><head>..</head><body>..</body></html>");
?>

Since Content-Disposition is set to inline the generated PDF is opened in the browser. If you change it to attachment the browser will popup the file download dialog:

<?php
header("Content-Disposition: attachment; filename=\"mydomain.pdf\"");
?>

Provide a PDF version of your web pages

This example shows how to enhance your PHP code so it can return a PDF version of your web pages. Let's look at the following helper function:

<?php
require 'pdfcrowd.php';

function generatePDF()
{
    if (!$_GET["pdf"])
        return False;

    try {
        // build the url and remove the pdf field from the query string
        $url = "http://" . $_SERVER["SERVER_NAME"] . $_SERVER["PHP_SELF"];
        if (count($_GET) > 1) {
            unset($_GET["pdf"]);
            $url = $url . "?" . http_build_query($_GET, '', '&');
        }

        // call the API
        $client = new Pdfcrowd("username", "apikey");
        $pdf = $client->convertURI($url);

        // send the generated pdf to the browser
        header("Content-Type: application/pdf");
        header("Cache-Control: no-cache");
        header("Accept-Ranges: none");
        header("Content-Disposition: attachment; filename=\"created.pdf\"");

        echo $pdf;
    }
    catch(PdfcrowdException $why) {
        echo "PDF creation failed: ".$why."\n";
    }

    return True;
}
?>

The generatePDF() function first checks if there is a pdf field in the query string. If yes, then the field is removed from the url. The function then passes the modified url to the API and finally sends the generated PDF to the browser.

You can use the function in your code like this:

<?php
if (generatePDF())
    return;

// your HTML rendering code
// ...
?>

Now when you enter

http://mydomain.com/page.php?pdf=1

the browser returns a PDF version of the page.

Customize Header And Footer Of Your PDFs

2011-03-18T00:00:00+01:00

The Pdfcrowd API has supported a customized page footer since its early beta stage. However, the functionality was quite limited since it allowed to insert plain text only.

Based on the feedback from our users, we have implemented an advanced solution recently which allows you to place HTML code inside a header and a footer. In this post we will show how you can make use of this new feature in your applications.

Step-By-Step Example

We will use Python for illustrative purposes, but the code would be essentially the same in all languages the API supports.

Let's start with instantiating the Pdfcrowd client object and setting the page format to Letter:

client = pdfcrowd.Client("***", "***")
client.setPageWidth("8.5in")
client.setPageHeight("11in")

The next step is to design our HTML header and footer. We can use the %p, %n, and %u variables anywhere in the HTML code. The variables will be expanded to the current page number, the total number of pages, and the URL of the original page respectively.

Now that we have the header and footer, we can either load it via HTTP:

client.setHeaderUrl("http://pdfcrowd.com{{ site.url }}/random/footer.html")
client.setFooterUrl("http://pdfcrowd.com{{ site.url }}/random/header.html")

Or we can write the HTML code inline in our application:

client.setHeaderHtml('<div> ... </div>')
client.setFooterHtml('<table> ... </table>')

The header and footer are placed inside the top and bottom margins. The following line will make them 0.7' tall.

client.setVerticalMargin("0.7in")

Let's finish our application and request the API to convert our test page to PDF.

pdf = client.convertURI('http://pdfcrowd.com/static/misc/lorem.html')

You can check out the result here.

Notes

The converted web page, the header and the footer are treated as independent HTML documents, so for instance CSS styles are not shared.
The API hard-wires <body style="margin: 0"> for the header/footer HTML code.
The following figure depicts the page setup:

Improve the Quality of PDFs Created With The API

2011-03-09T00:00:00+01:00

While the default conversion settings produce great quality PDF files you may want to fine tune the conversion to get an even better result. This post provides tips on improving the quality of images and text in PDFs created with the Pdfcrowd HTML to PDF API.

Jagged Images

The HTML content is scaled up by 1/3 by default when printed to PDF which may cause some images to appear jagged. You can use the setPdfScalingFactor API method to change the scaling and to print the image in the original resolution:

client.setPdfScalingFactor(1.0)

Note: All API clients use 1.0 as the default value since the version 2.0.

This method is available in the latest version of all API client libraries. Also make sure that you use the PNG or GIF image formats for line drawings or other textual or iconic graphics. JPEG can cause noticeable artifacts when used for such type of images.

Note that if an HTML page is designed for a specific width which is greater than the PDF page width then the HTML content is automatically scaled down to fit the page width regardless of the scaling factor value.

Provide High Resolution Images

Even if you applied the previous tip there is still room for improvement. When a user opens your PDF in a viewer and zooms in, the images will be rendered in a higher resolution than they were designed for which will make them appear jagged or blurred.

Let's assume there is a 160×32 logo in your HTML document and you want to print it to PDF without quality degradation even when the PDF is zoomed in. The trick is to create a high resolution version of the logo, for instance 320×64, and then specify 160×32 dimensions in your HTML code:

<img src="logo320x64.png" width="160" height="32" />

Here is a demonstration - open this PDF file, try to zoom in to e.g. 400%, and see how the individual versions of the image are rendered.

Glyph Positioning

If your HTML document contains text typed with a small size font then some consecutive glyphs may seem a bit too close or too distant when printed to PDF. The setHtmlZoom API method can help here. Despite its name, it does not change the font size but the precision used for positioning the glyphs. The default value is 100%, values around 500% should improve the glyph spacing:

client.setHtmlZoom(500)

Note: All API clients use 200 as the default value since the version 2.0.

Let's look at the difference:

HTML Zoom 100%
HTML Zoom 500%