Generate a PDF from HTML with APITemplate.io

Introduction

PDF stands for Portable Document Format. They are widely used to distribute read-only documents and they also preserve the layout of the document independent of the platform they are viewed on.

With APITemplate.io, generating a PDF from HTML is easy. You can create dynamic PDFs with HTML, CSS, and JSON.

APITemplate.io integrates with No-code platforms, you can generate and automate your PDF generation with Zapier or Integromat and APITemplate.io. If you are an advanced user, we support REST API calls to generate dynamic PDFs as well.

Additionally, we also support custom header, footer, margin, orientation, and paper size for your PDF generation.

The HTML Editor

First, you have to create a new PDF template in our web console and select HTML editor. Then, launch the HTML editor.

The HTML Editor consists of 4 tabs, namely Template, CSS, Sample JSON, and Settings.

(i) Template

The Template tab is for the HTML template which contains dynamic data to be replaced by the values passed in as JSON when the template is rendered. Template variables are enclosed in

{{ variable }}

It’s a special syntax for our template language – Jinja2. Jinja2 is used together with JSON data to create dynamic PDFs. You can learn about the template language here.

 

(ii) CSS 

CSS tab is essentially for the CSS styles. You may also include any other external Javascript libraries, fonts, and other external resources in this section.

 

(iii) Sample JSON

The following is the sample JSON for generating the preview PDF.

(iv) Settings

You can configure your PDF’s header, footer, margin, orientation, and paper size.

Conclusion

After a template is created, save your template. You can preview the content in HTML format with the Quick Preview button (which renders instantly) or generate a PDF with a header and footer.

The next step is to automate the PDF creation. The followings are the tutorials with Zapier and Integromat.

PDF Generation Tutorials
Tutorial: Zapier Integration (PDF Generation)
Tutorial: Integromat Integration (PDF Generation)
Tutorial: Embedding charts into a PDF (HTML to PDF)

Table of Contents

Share:

Facebook
Twitter
Pinterest
LinkedIn

Articles for Image Generation

Articles for PDF Generation