HTML to PDF in PDF.co supports Mustache and Handlebars templates. Mustache is a logicless template syntax that can be used for HTML, config files, and source code. Handlebars is an extension of Mustache that lets you build semantic templates easily.
- Select PDF.co API v. 1 from the Collections Tab
- Click JSON Under HTML Template
- cURL Request
- Use JSON Code to Create Invoice
- Generate the Invoice and Click Send
- Check Status
- Copy & Paste URL to Browser
- Video Tutorial: Generate PDF from HTML Templates
In this tutorial, we will work on the Invoice Template Sample 1. You can access Invoice Template Sample 2 and Template Sample 3 here and here. To get your API key, sign up at https://app.pdf.co/subscriptions.
You can also make a PDF Invoice from scratch by adding text and images to an empty PDF. Check out it out here.
1. Select PDF.co API v. 1 from the Collections Tab
Open the Postman app and click on the PDF.co API v.1 folder under the Collections tab.
2. Click JSON (Invoice Template 1) Under HTML Template
3. cURL Request:
curl --location --request POST 'https://api.pdf.co/v1/pdf/convert/from/url' \
--header 'x-api-key: INSERT_YOUR_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-1.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 Invoice
Under the Body menu, select raw, and you will see the JSON code that we will use to fill out the invoice.
Below is the templateData parameter inside the JSON code for this Invoice Template.
{
"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. Generate the Invoice and Click Send
The engine will take the HTML template which will take the data from the templateData parameter, and it will generate the invoice.
On the top right, click on the Send button.
6. Check Status
Check and make sure that the Status says 200 OK.
7. Copy & Paste URL to Browser
Copy the URL in the result, and paste it in your browser’s address bar.
Hooray! We have generated our PDF file – here is what our PDF Invoice looks like.
Generate PDF from HTML Templates – Video
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