In today’s tutorial, we illustrate how to convert HTML to pdf with PHP. As you know already, PDF stands for “portable document format”, a format that is used when we need to save a file that cannot modify but can be printed easily.
In today’s article, we will show you have to post a form and save the values into pdf in PHP. So, this tutorial will guide you step by step on how to create pdf file using the fpdf in PHP.
How to create a PDF file using Fpdf in PHP
Follow following the below steps and upload the file using dropzone js and jquery without refreshing the whole web page in PHP:
Step 1 – Download fpdf Library
Step 2 – Create index.php
Step 3 – Create convert-pdf.php
So we dig in to the real steps of implementation in the tutorial
Step 1: Download fpdf Library
Download the fpdf library from this URL http://www.fpdf.org/ and extract the contents to the vendor folder.
Step 2: Create index.php
Your index.php will look like below with a form having several basic fields to capture the basic user details. You already know that we use the Twitter bootstrap library for the styling of the page, which makes our styling easy.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<title>Convert HTML to PDF using FPDF</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-7 mx-auto">
<h5 class="text-center mt-5 mb-5">Convert HTML to Pdf using Fpdf</h5>
<form action="convert-pdf.php" method="post">
<div class="mb-3">
<label for="name" class="form-label">Name</label>
<input type="text" class="form-control" id="name" name="name">
</div>
<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input type="text" class="form-control" id="email" name="email">
</div>
<div class="mb-3">
<label for="message" class="form-label">Message</label>
<input type="text" class="form-control" id="message" name="message">
</div>
<div class="mb-3">
<button type="submit" class="btn btn-primary mb-3">Submit</button>
</div>
</form>
</div>
</div>
</div>
</body>
</html>Step 3: Create convert-pdf.php
This page has a vital role in our application, as it receives the values from the form and processes them into a pdf file. In the first section, we include the required fpdf library from the vendor folder. And then we receive the post variables from the form and pass this to the fpdf class which prints these values to the pdf.
<?php
#includes the fpdf main libarary
require_once("vendor/fpdf/fpdf.php");
#recieving the form data
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$pdf = new FPDF();
$pdf->AddPage();
$pdf->SetFont('arial','',12);
$pdf->Cell(0,10,"Contact Details",1,1,'C');
$pdf->Cell(40,10,"Name",1,0);
$pdf->Cell(75,10,"Email",1,0);
$pdf->Cell(75,10,"Message",1,0);
$pdf->Ln();
$pdf->Cell(40,10,$name,1,0);
$pdf->Cell(75,10,$email,1,0);
$pdf->Cell(75,10,$message,1,0);
$file = time().'.pdf';
$pdf->output($file,'D');
?>That’s it, once everything working smoothly you will get your pdf files something like the below image.
How would I add a image to this?