PDF.co supports Mustache and Handlebars templates to produce HTML to PDF. Both Mustache and Handlebars are logic-less template syntax. They can be used for source codes, config files, HTML, and more. Handlebars are compatible with Mustache and are capable of swapping with Mustache in most cases.
- Select PDF.co API v. 1 from the Collections Tab
- Select HTML Template and Click on JSON
- cURL Request
- Use JSON Code to Create the Invoice
- See Created Invoice from templateData then Click Send
- Get the URL from the Result to Open the Invoice
We are now at the Invoice Template Sample 3 tutorial. Check out Template Sample 1 and Template Sample 2 for other template sample layouts.
You can also make a PDF Invoice from scratch by adding text and images to an empty PDF. Check it out here.
1. Select PDF.co API v. 1 from the Collections Tab
Go to the Collections tab and click the PDF.co API v.1 folder.
2. Select HTML Template and Click on JSON
On the list of folders, look for and click on the HTML template. Then click on JSON (Invoice template 3).
3. cURL Request
curl --location --request POST 'https://api.pdf.co/v1/pdf/convert/from/url' \
--header 'x-api-key: INSERT_API_KEY_HERE' \
--header 'Content-Type: application/json' \
--data-raw '{
"url": "https://bytescout-com.s3-us-west-2.amazonaws.com/files/cloudapi-templates/template-invoice-3.html",
"name": "newInvoice.pdf",
"margins": "5px 5px 5px 5px",
"paperSize": "Letter",
"orientation": "Portrait",
"printBackground": true,
"header": "",
"footer": "",
"async": false,
"encrypt": false,
"templateData": "{\r\n \"invoice\": {\r\n \"id\": \"0021\",\r\n \"date\": \"August 29, 2041\",\r\n \"dateDue\": \"September 29, 2041\"\r\n },\r\n \"issuer\": {\r\n \"name\": \"Sarah Connor\",\r\n \"company\": \"T-800 Research Lab\",\r\n \"address\": \"435 South La Fayette Park Place, Los Angeles, CA 90057\",\r\n \"website\": \"www.example.com\",\r\n \"email\": \"info@example.com\"\r\n },\r\n \"client\": {\r\n \"name\": \"Cyberdyne Systems\",\r\n \"company\": \"Cyberdyne Systems\",\r\n \"address\": \"18144 El Camino Real, Sunnyvale, California\",\r\n \"website\": \"www.example.com\",\r\n \"email\": \"sales@example.com\"\r\n },\r\n \"items\": [\r\n {\r\n \"name\": \"T-800 Prototype Research\",\r\n \"price\": \"$1000.00\"\r\n },\r\n {\r\n \"name\": \"T-800 Cloud Sync Setup\",\r\n \"price\": \"$300.00\"\r\n },\r\n {\r\n \"name\": \"Skynet Domain Setup\",\r\n \"price\": \"$50.00\"\r\n },\r\n {\r\n \"name\": \"T-800 OS License\",\r\n \"price\": \"$350.00\"\r\n },\r\n {\r\n \"name\": \"T-800 Vision Testing\",\r\n \"price\": \"$150.00\"\r\n },\r\n ],\r\n \"discount\": \"$100.00%\",\r\n \"tax\": \"$126.88 (7.5%)\",\r\n \"total\": \"$1876.88\",\r\n \"paid\": true,\r\n \"note\": \"Thank you for your business with us.\",\r\n \"primaryColor\": \"#E4135A\",\r\n \"secondaryColor\": \"#00538B\",\r\n \"textColor\": \"#3F4254\"\r\n }"
}'
4. Use JSON Code to Create the Invoice
On the raw inside the Body menu is a JSON code that we will use to create the invoice with pre-filled invoice information.
This templateData parameter shows the invoice information that we added in the JSON code.
{
"invoice": {
"id": "0021",
"date": "August 29, 2041",
"dateDue": "September 29, 2041"
},
"issuer": {
"name": "Sarah Connor",
"company": "T-800 Research Lab",
"address": "435 South La Fayette Park Place, Los Angeles, CA 90057",
"website": "www.example.com",
"email": "info@example.com"
},
"client": {
"name": "Cyberdyne Systems",
"company": "Cyberdyne Systems",
"address": "18144 El Camino Real, Sunnyvale, California",
"website": "www.example.com",
"email": "sales@example.com"
},
"items": [
{
"name": "T-800 Prototype Research",
"price": "$1000.00"
},
{
"name": "T-800 Cloud Sync Setup",
"price": "$300.00"
},
{
"name": "Skynet Domain Setup",
"price": "$50.00"
},
{
"name": "T-800 OS License",
"price": "$350.00"
},
{
"name": "T-800 Vision Testing",
"price": "$150.00"
},
],
"discount": "$100.00%",
"tax": "$126.88 (7.5%)",
"total": "$1876.88",
"paid": true,
"note": "Thank you for your business with us.",
"primaryColor": "#E4135A",
"secondaryColor": "#00538B",
"textColor": "#3F4254"
}
5. See Created Invoice from templateData then Click Send
To give you a picture of the invoice generation process. It starts from the engine that reads the HTML template. Next, the template processes the templateData parameter. Then, the invoice is created, which contains the data from templateData.
Click Send.
You are good to go when the status says 200 OK.
6. Get the URL from the Result to Open the Invoice
Super! We can now see our generated PDF Invoice.
Similar Pages
- How to Create Invoices
- How to Create a Perfect Invoice with PDF and HTML Templates
- Create PDF Invoice From Google Sheet using PDF.co and Apps Script
- How to Generate Invoice Online and Sign with PDF.co
- How to Create PDF Invoice using PDF and HTML Templates in C#
- Create PDF Invoice using HTML Templates in JavaScript
- How to Generate Dynamic PDF E-commerce Invoice
- How to Generate Invoice with Barcode using HTML to PDF and Barcode Generator in PDF.co
- Make PDF Invoice by Adding Text and Images to PDF Template using PDF.co and Zapier
- Generate PDF Invoice from Invoice Template using PDF.co API (Template Sample 1)
- Generate PDF Invoice from Scratch using PDF.co API (Template Sample 2)
- Generate PDF Invoice from Invoice Template using PDF.co API (Template Sample 3)
- How to Create Invoice With/Without Discount
- How to Create Invoice With/Without Logo
- Create QuickBooks Online Invoices from Parsed PDF Data using PDF.co and Zapier
- Create QuickBooks Online Invoices from Parsed PDF Data using PDF.co and Integromat