Link Search Menu Expand Document

Generate PDF Invoice From HTML Template - PHP

PDF from HTML template (Mustache or HandleBars style) sample in PHP demonstrating ‘Generate PDF Invoice From HTML Template’

generate-invoice.php
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>PDF Invoice Generation Results</title>
</head>
<body>

<?php 

// Get submitted form data
$apiKey = $_POST["apiKey"]; // The authentication key (API Key). Get your own by registering at https://app.pdf.co

// HTML template
$template = file_get_contents("./invoice_template.html");
// Data to fill the template
$templateData = file_get_contents("./invoice_data.json");


// Prepare URL for HTML to PDF API call
$url = "https://api.pdf.co/v1/pdf/convert/from/html";

// Prepare requests params
$parameters = array();
$parameters["name"] = "result.pdf";
$parameters["html"] = utf8_encode($template);
$parameters["templateData"] = utf8_encode($templateData);

// Create Json payload
$data = json_encode($parameters);

// Create request
$curl = curl_init();
curl_setopt($curl, CURLOPT_HTTPHEADER, array("x-api-key: " . $apiKey, "Content-type: application/json"));
curl_setopt($curl, CURLOPT_URL, $url);
curl_setopt($curl, CURLOPT_POST, true);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($curl, CURLOPT_POSTFIELDS, $data);

// Execute request
$result = curl_exec($curl);

if (curl_errno($curl) == 0)
{
    $status_code = curl_getinfo($curl, CURLINFO_HTTP_CODE);
    
    if ($status_code == 200)
    {
        $json = json_decode($result, true);
        
        if ($json["error"] == false)
        {
            $resultFileUrl = $json["url"];
            
            // Display link to the file with conversion results
            echo "<div><h2>Conversion Result:</h2><a href='" . $resultFileUrl . "' target='_blank'>" . $resultFileUrl . "</a></div>";
        }
        else
        {
            // Display service reported error
            echo "<p>Error: " . $json["message"] . "</p>"; 
        }
    }
    else
    {
        // Display request error
        echo "<p>Status code: " . $status_code . "</p>"; 
        echo "<p>" . $result . "</p>";
    }
}
else
{
    // Display CURL error
    echo "Error: " . curl_error($curl);
}

// Cleanup
curl_close($curl);


?>

</body>
</html>
invoice_data.json
{
    "number": "1234567",
    "date": "April 30, 2016",
    "from": "Acme Inc., City, Street 3rd , +1 888 123-456, support@example.com",
    "to": "Food Delivery Inc., New York, Some Street, 42",
    "lines": [{
        "title": "Setting up new web-site",
        "quantity": 3,
        "price": 50
    }, {
        "title": "Configuring mail server and mailboxes",
        "quantity": 5,
        "price": 50
    }]
}
invoice_template.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">

<head>
	<title>Invoice {{ number}}</title>

	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<!-- Latest compiled and minified CSS -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
	<style type="text/css">
		.invoice-title h2,
		.invoice-title h3 {
			display: inline-block;
		}
		
		.table > tbody > tr > .no-line {
			border-top: none;
		}
		
		.table > thead > tr > .thick-line {
			border-bottom: 2px solid;
			border-bottom-color: #888888;
		}
		
		.table > tbody > tr > .thick-line {
			border-top: 2px solid;
			border-top-color: #888888;
		}
	</style>
	<script type="text/javascript">
		Handlebars.registerHelper('getTotal', function(quantity, price) {
			var total = quantity * price;
			return total;
		});
		Handlebars.registerHelper('getTotalLines', function(lines) {
			var total = 0;
			lines.forEach(function(line) {
				total += line.quantity * line.price;
			});
			return total;
		});

		Handlebars.registerHelper("formatDate", function(timestamp) {
			var date = new Date(timestamp);
			return date.getDate() + "/" + (date.getMonth() + 1) + "/" + date.getFullYear() + " " + date.getHours() + ":" + date.getMinutes();
		});
	</script>
</head>

<body>
	<div class="container">
		<div class="row">
			<div class="col-xs-12">
				<div class="invoice-title">
					<h2>Invoice #{{ number }}</h2>
				</div>
				<hr>

				<div class="row">
					<div class="col-xs-12">
						<address>
	    					<strong>Date:</strong> {{ formatDate date }}
	    				</address>
					</div>
				</div>

				<div class="row">
					<div class="col-xs-12">
						<address>
	        				<strong>From:</strong> {{ from }}
	    				</address>
					</div>
					<div class="col-xs-12">
						<address>
	        				<strong>To:</strong> {{ to }}
	    				</address>
					</div>
				</div>
			</div>
		</div>

		<div class="row">
			<div class="col-md-12">
				<div class="panel panel-default">
					<table class="table table-condensed">
						<thead>
							<tr class="active">
								<td class="thick-line"><strong>Service</strong></td>
								<td class="thick-line"><strong>Quantity</strong></td>
								<td class="text-center thick-line"><strong>Price</strong></td>
								<td class="text-right thick-line"><strong>Sub-Total</strong></td>
							</tr>
						</thead>
						<tbody>
							
							<!-- foreach ($order->lineItems as $line) or some such thing here -->
							{{#each lines}}
							<tr>
								<td>{{title}}</td>
								<td>{{quantity}}</td>
								<td class="text-center">${{price}}</td>
								<td class="text-right">{{ getTotal quantity price }}</td>
							</tr>
							{{/each}}

							<tr>
								<td class="thick-line"></td>
								<td colspan='3' class="thick-line text-right"><strong>Total Due: ${{ getTotalLines lines}}</strong></td>
							</tr>

						</tbody>
					</table>
				</div>

				<div class='text-left'>
					<strong>Terms:</strong> Due on receipt.
				</div>

				<p/>

				<div class='text-left'>
					Thank you for your business!
				</div>

			</div>
		</div>
	</div>
</body>

</html>

sample.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSV To PDF Cloud API Example</title>
</head>

<body>

    <form name="form1" enctype="multipart/form-data" method="post" action="generate-invoice.php">
        <p>
            <label>Authentication key (API Key). Get your own by registering at <a href="https://apidocs.pdf.co">https://apidocs.pdf.co</a>.</label>
            <br/>
            <input type="text" name="apiKey" placeholder="API Key"/>
        </p>
        <p>
            Click "Proceed" to generate PDF invoice from prepared "invoice_template.html" and "invoice_data.json".
        </p>
        <input type="submit" name="submit" value="Proceed" />
    </form>

</body>
</html>

PDF.co Web API: the Web API with a set of tools for documents manipulation, data conversion, data extraction, splitting and merging of documents. Includes image recognition, built-in OCR, barcode generation and barcode decoders to decode bar codes from scans, pictures and pdf.

Get your PDF.co API key here!

Download Source Code (.zip)

return to the previous page explore PDF from HTML template (Mustache or HandleBars style) endpoint