Link Search Menu Expand Document

Generate PDF Invoice From HTML Template - C#

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

Program.cs
using System;
using System.Collections.Generic;
using System.IO;
using System.Net;
using Newtonsoft.Json;
using Newtonsoft.Json.Linq;

namespace ByteScoutWebApiExample
{
	class Program
	{
		// The authentication key (API Key).
		// Get your own by registering at https://app.pdf.co
		const String API_KEY = "***********************************";

		static void Main(string[] args)
		{
			// HTML template
			string template = File.ReadAllText(@".\invoice_template.html");
			// Data to fill the template
			string templateData = File.ReadAllText(@".\invoice_data.json");
			// Destination PDF file name
			string destinationFile = @".\result.pdf";

			// Create standard .NET web client instance
			WebClient webClient = new WebClient();

			// Set API Key
			webClient.Headers.Add("x-api-key", API_KEY);

			webClient.Headers.Add("Content-Type", "application/json");

			try
			{
                // URL for `HTML to PDF` API call
				string url = Uri.EscapeUriString(string.Format(
					"https://api.pdf.co/v1/pdf/convert/from/html?name={0}", 
					Path.GetFileName(destinationFile)));

				// Prepare requests params as JSON
				Dictionary<string, object> parameters = new Dictionary<string, object>();
				parameters.Add("name", Path.GetFileName(destinationFile));
				parameters.Add("html", template);
				parameters.Add("templateData", templateData);

				// Convert dictionary of params to JSON
				string jsonPayload = JsonConvert.SerializeObject(parameters);

                // Execute request
				string response = webClient.UploadString(url, jsonPayload);

	            // Parse JSON response
	            JObject json = JObject.Parse(response);

	            if (json["error"].ToObject<bool>() == false)
	            {
		            // Get URL of generated PDF file
		            string resultFileUrl = json["url"].ToString();

		            webClient.Headers.Remove("Content-Type"); // remove the header required for only the previous request

		            // Download the PDF file
					webClient.DownloadFile(resultFileUrl, destinationFile);

					Console.WriteLine("Generated PDF document saved as \"{0}\" file.", destinationFile);
	            }
	            else
	            {
		            Console.WriteLine(json["message"].ToString());
	            }
            }
            catch (WebException e)
            {
	            Console.WriteLine(e.ToString());
            }

			webClient.Dispose();


            Console.WriteLine();
            Console.WriteLine("Press any key to exit...");
            Console.ReadKey();
		}
	}
}

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>

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