In this article we will see how to create a PDF version for WordPress articles using the mPDF library.
How mPDF works
mPDF uses an approach based on rendering an HTML page with a CSS style sheet for printing (the media type is print).
In practice, this library is passed an HTML document that will be interpreted as a browser and then transformed into a PDF file.
mPDF supports all the main types of HTML5 elements and many CSS properties, also supporting positioning and floating within the document. In fact, this library also allows you to use CSS 2.1 and CSS3 properties for the media type screen.
Which version of mPDF?
The recent versions of mPDF have radically changed the structure of the library code. It is now used composer for class auto loading and namespaces for the inclusion of additional components and library helpers.
Currently, shared hosting supports all PHP 5.6+ or PHP 7, but not all of them allow shell access for composer installation. For this reason we will use version 6.0 of the library that does not need this dependency.
Preparation of the CSS file
First we create a CSS file for printing in the directory of the theme in use:
body { font: 14pt/24pt serif;}
This basic rule sets the font size, font type, and line spacing for the document.
So let’s move on to normalize the hyperlinks:
a { color: #000; text-decoration: none; }
We have removed the underlining and uniformed the color. If the link is external we can print the URL with the generated content:
a[href^=http]:after { content: ' (' attr(href) ') '; }
Now we have to make the images adaptable to the content of the page:
img { display: block; max-width: 100%; height: auto; }
Of course you can add other specific styles, for example by removing the presentational elements:
hr { display: none }
mPDF already includes a default style sheet, so the styles omitted will be inherited from that style sheet.
Include the library
In the file functions.phpof our theme we include at the beginning our library:
require_once( get_template_directory() . '/lib/mpdf/mpdf.php');
Recall that the constant <code>TEMPLATEPATH</code> has been deprecated so we must resort to the function <code>get_template_directory()</code>.
Define the rendering function
Still in the file <code>functions.php</code> we define a function that creates an HTML document as a string and passes it to mPDF for rendering:
function my_render_pdf() {
global $post;
$post_obj = get_post( $post->ID );
$pdf_file_name = $post_obj->post_name . '.pdf';
$html = '<html><head><title>' . $post_obj->post_title;
$html .= '</title>';
$html .= '<link rel="stylesheet" type="text/css"';
$html .= ' media="print" href="';
$html .= get_template_directory_uri() . '/pdf.css';
$html .= '"></title></head>';
$html .= '<body>' . $post_obj->post_content . '</body>';
$html .= '</html>';
$mpdf = new Mpdf();
$mpdf->WriteHTML( $html );
$mpdf->Output( $pdf_file_name, 'I' );
}
Our function retrieves the raw data of the current post using <code>get_post()</code> as WordPress adds filters to the fields that would modify the final output.
Then we pass the HTML string to the library by specifying the name of the PDF file and the type of display (“I” stands for inline, ie in the browser).
Use the function
In the file we <code>single.php</code> will use a query string like this:
<?php if( isset( $_GET['print'] ) && $_GET['print'] == 'pdf' ): my_render_pdf(); exit; endif; get_header(); ?>
So we make the URL in the print link:
<a href="<?php the_permalink(); ?>?print=pdf">...</a>
