HTML to PDF API Tutorial – Generate Fillable PDFs from HTML in Minutes

#webdev #programming #productivity #pdf

Introduction

If you’ve ever needed to generate PDFs from your web application, you’ve probably looked into libraries like Puppeteer, wkhtmltopdf, or pdf-lib. They can work well, but they require setup, dependencies, and ongoing maintenance.

An HTML-to-PDF API offers a faster and cleaner approach. You send your HTML, and it returns a pixel-perfect PDF. This tutorial will show you how to use PDFGate’s HTML-to-PDF API to create PDFs directly from HTML, including fillable form fields in just a few minutes.

Why Use an HTML-to-PDF API Instead of Libraries

Local libraries require:

Installing headless browsers or binaries
Managing updates and compatibility
Handling font embedding and CSS quirks

With an API:

No installation, just HTTP requests
Always runs the latest rendering engine
Supports full HTML/CSS/JS, custom fonts, media queries
Automatically handles page breaks and margins
With PDFGate, even form fields (input, textarea, select) become fillable PDF fields

Step 1: Get Your API Key

Sign up for a free PDFGate account.
In your dashboard, go to Settings → API Keys.
Copy your API key, you’ll need it for requests.

Step 2: Create Your HTML Template

Here’s a basic HTML invoice with form fields:

<html>
  <body>
    <h1>Invoice</h1>
    <p>Customer Name: <input type="text" name="customer" /></p>
    <p>Service: <select name="service">
      <option>Web Design</option>
      <option>Hosting</option>
    </select></p>
    <p>Notes:</p>
    <textarea name="notes"></textarea>
  </body>
</html>

Step 3: Send HTML to the API and save the generated PDF

Using curl:

curl --header "Content-Type: application/json" \
--header "Authorization: Bearer YOUR_API_KEY" \
--request POST \
--data '{"pageSizeType":"a4", "html":"ADD_THE_HTML_FROM_STEP_2"}' \
https://api.pdfgate.com/v1/generate/pdf \
-o output.pdf

Adding Fillable Form Fields

PDFGate automatically maps supported HTML elements to AcroForm fields:

input[type="text"] → Text field
input[type="checkbox"] → Checkbox
textarea → Multi-line text area
select → Dropdown menu

Digital Signature HTML Example:

<p>Signature: <pdfgate-signature-field name="sig1"></pdfgate-signature-field></p>

The generated PDF will have an actual signature field that can be filled in any PDF viewer.

Full Example Output

You can see an example fillable PDF generated by this method here:
PDF Forms Demo

Conclusion

With just a few lines of code, you can generate fillable, high-quality PDFs directly from HTML using an HTML-to-PDF API.
No more browser setup, no more manual form field coding, just clean, automated PDF generation for invoices, contracts, forms, or any document your app needs.