How to Convert HTML to PDF in PHP with fpdf

June 23rd, 2024 Huzoor Bux HTML, PHP 3 comments

HTML to PDF conversion is always a problem for PHP Programmers and all the time they search for suitable solutions so after reviewing this article you will not take more than 10 minutes to configure HTML to PDF, I have used a library fpdf open source and very useful library for developers here is a simple tutorial on how to convert HTML to PDF with fpdf.

DEMO

DOWNLOAD CODE

You have to download fpdf library and include it in your PHP file below settings and how to show tags, fonts, and images in your pdf file. With fpdf library, we used the HTMLparser library contributed by programmers and all other libraries available here you can download and use as per your requirement.

The conversion of HTML pages to PDF files is a difficult task. The first step in the process is converting HTML into PDF using a converter.

fpdf HTML to pdf

A conversion tool will convert HTML files to PDF, but it will not produce as high quality as a professional converter. Professional converters are capable of generating much better results and are often used in large corporations for their in-house publishing needs.

A lot of people find it difficult to understand the difference between converters and professional converters. Converters are cheap and easy to use, while professional converters can be expensive and complicated to use depending on the program’s features.

how to convert PHP page to pdf using PHP

index.html

In this file I have created a simple contact form data on submitting it shows that submitted data on PDF format:

<html>

<head>

<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">

<link href="css/bootstrap-responsive.min.css" rel="stylesheet" media="screen">

<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>

<script type="text/javascript" src="js/bootstrap.min.js"></script>

<title>How to create Contact Form using Bootstrap  | PGPGang.com</title>

</head>



<body>

<h2>How to create Contact Form using Bootstrap example.&nbsp;&nbsp;&nbsp;=> <a href="http://www.phpgang.com/">Home</a> | <a href="http://demo.phpgang.com/">More Demos</a></h2>

<div class="container">

      <form class="contact-us form-horizontal" action="actionpdf.php" method="post">

        <legend>Fill Form and submit to generate PDF</legend>        

        <div class="control-group">

            <label class="control-label">Name</label>

            <div class="controls">

                <div class="input-prepend">

                <span class="add-on"><i class="icon-user"></i></span>

                    <input type="text" class="input-xlarge" name="name" placeholder="Name">

                </div>

            </div>

        </div>

        <div class="control-group">

            <label class="control-label">Email</label>

            <div class="controls">

                <div class="input-prepend">

                <span class="add-on"><i class="icon-envelope"></i></span>

                    <input type="text" class="input-xlarge" name="email" placeholder="Email">

                </div>

            </div>    

        </div>

        <div class="control-group">

            <label class="control-label">Url</label>

            <div class="controls">

                <div class="input-prepend">

                <span class="add-on"><i class="icon-globe"></i></span>

                    <input type="text" id="url" class="input-xlarge" name="url" placeholder="http://www.example.com">

                </div>

            </div>

        </div>

        <div class="control-group">

            <label class="control-label">Comment</label>

            <div class="controls">

                <div class="input-prepend">

                <span class="add-on"><i class="icon-pencil"></i></span>

                    <textarea name="comment" class="span4" rows="4" cols="80" placeholder="Comment (Max 200 characters)"></textarea>

                </div>

            </div>

        </div>

        <div class="control-group">

          <div class="controls">

            <button type="submit" class="btn btn-primary">Submit</button>

            <button type="button" class="btn">Cancel</button>

          </div>    

        </div>

      </form>

</div>

</body>

</html>

actionpdf.php

This file contains PHP code to generate pdf file and show your submitted data on that file.

<?php

require('WriteHTML.php');



$pdf=new PDF_HTML();



$pdf->AliasNbPages();

$pdf->SetAutoPageBreak(true, 15);



$pdf->AddPage();

$pdf->Image('logo.png',18,13,33);

$pdf->SetFont('Arial','B',14);

$pdf->WriteHTML('<para><h1>PHPGang Programming Blog, Tutorials, jQuery, Ajax, PHP, MySQL and Demos</h1><br>

Website: <u>www.phpgang.com</u></para><br><br>How to Convert HTML to PDF with fpdf example');



$pdf->SetFont('Arial','B',7); 

$htmlTable='<TABLE>

<TR>

<TD>Name:</TD>

<TD>'.$_POST['name'].'</TD>

</TR>

<TR>

<TD>Email:</TD>

<TD>'.$_POST['email'].'</TD>

</TR>

<TR>

<TD>URl:</TD>

<TD>'.$_POST['url'].'</TD>

</TR>

<TR>

<TD>Comment:</TD>

<TD>'.$_POST['comment'].'</TD>

</TR>

</TABLE>';

$pdf->WriteHTML2("<br><br><br>$htmlTable");

$pdf->SetFont('Arial','B',6);

$pdf->Output(); 

?>

In this file we add page and auto page break truly if your content increases single page area then it will automatically add 2nd page and process.

$pdf->Image('logo.png',18,13,33);

$pdf->SetFont('Arial','B',14);

These lines used to add a logo and select font size for heading.

$pdf->SetFont('Arial','B',7);

Select small font then heading for inner content.

$pdf->WriteHTML2("<br><br><br>$htmlTable");

$pdf->Output();

Write HTML to pdf file and output that file on the web browser.