Converting HTML to PDF - How to start?
Using PDF Generator API V4, you have two options for converting HTML to PDF. You can send raw HTML directly or load it from an existing website that is publicly accessible on the Internet.
In this tutorial, we will cover basics so you can start within a few minutes with converting HTML into a PDF document:
Using the conversion endpoint HTML to PDF, you can specify the document configuration, such as paper_size (A3, A4, Letter, etc.), orientation, filename, and more. Please refer to the documentation to understand the options that are available fully.
The property you will send the raw HTML is named content. It should contain the escaped HTML that you want to render. To help escape the HTML string, you can simply copy your markup into the HTML Compressor tool we provide for testing purposes. It will remove extra whitespaces and escape double quotes so the content can be sent via JSON to our API.
Here is how it works:
You paste your custom HTML into the textarea and click “Compress HTML”, which will return the compressed code version below the button.
You can download an example file here and visualise it in the browser by clicking here.
Once done, you can prepare the API call to convert the HTML to PDF.
Here is an example:
And the response:
Now that you have made the first manual request, you should proceed and follow the documentation to automate the generation process. Just remember that content must be escaped before sending it to be rendered.
We support all fonts that can be loaded via external CSS file, preferably via CDN, regardless of language. If the browser can render it, it can be used.
Using the conversion endpoint URL to PDF, you can specify a public website and configurations such as paper_size (A3, A4, Letter, etc.), orientation, filename, and more. Please refer to the documentation to understand the options that are available fully.
The payload to generate a PDF from the URL is as follows:
You might need to adjust the orientation and paper size to fit the content of the given website, and you can adjust other formats as you see fit.
Resources:
HTML to PDF doc
URL to PDF doc
HTML Compressor
Example HTML
In this tutorial, we will cover basics so you can start within a few minutes with converting HTML into a PDF document:
Render a PDF from raw HTML
Using the conversion endpoint HTML to PDF, you can specify the document configuration, such as paper_size (A3, A4, Letter, etc.), orientation, filename, and more. Please refer to the documentation to understand the options that are available fully.
The property you will send the raw HTML is named content. It should contain the escaped HTML that you want to render. To help escape the HTML string, you can simply copy your markup into the HTML Compressor tool we provide for testing purposes. It will remove extra whitespaces and escape double quotes so the content can be sent via JSON to our API.
Here is how it works:
You paste your custom HTML into the textarea and click “Compress HTML”, which will return the compressed code version below the button.
You can download an example file here and visualise it in the browser by clicking here.
Once done, you can prepare the API call to convert the HTML to PDF.
Here is an example:
{
"paper_size": "a4",
"landscape": false,
"filename": "testing_raw_html",
"content": "<!DOCTYPE html><html><head><link rel=\"preconnect\" href=\"https://fonts.googleapis.com\"><link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin><link href=\"https://fonts.googleapis.com/css2?family=Playwrite+MX:wght@100..400&display=swap\" rel=\"stylesheet\"><link rel=\"preconnect\" href=\"https://fonts.googleapis.com\"><link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin><link href=\"https://fonts.googleapis.com/css2?family=Tiny5&display=swap\" rel=\"stylesheet\"><link rel=\"preconnect\" href=\"https://fonts.googleapis.com\"><link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin><link href=\"https://fonts.googleapis.com/css2?family=Playwrite+ES+Deco:wght@100..400&display=swap\" rel=\"stylesheet\"><!-- Japanese --><link rel=\"preconnect\" href=\"https://fonts.googleapis.com\"><link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin><link href=\"https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap\" rel=\"stylesheet\"><!-- Chinese --><link rel=\"preconnect\" href=\"https://fonts.googleapis.com\"><link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin><link href=\"https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&display=swap\" rel=\"stylesheet\"><!-- Thai --><link rel=\"preconnect\" href=\"https://fonts.googleapis.com\"><link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin><link href=\"https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai+Looped:wght@100;200;300;400;500;600;700&display=swap\" rel=\"stylesheet\"><style> body { background-color: linen; } h1 { color: maroon; margin-left: 40px; font-family: \"Playwrite MX\", sans-serif; font-weight: 400; font-style: normal; } p { color: red; font-family: 'Tiny5', sans-serif; } .text-es { color: orange; font-family: 'Playwrite ES Deco', sans-serif; } .text-jp { color: blue; font-family: 'Noto Sans JP', sans-serif; } .text-cn { color: green; font-family: 'Noto Sans TC', sans-serif; } .text-thai { color: purple; font-family: 'IBM Plex Sans Thai Looped', sans-serif; } </style><head><body><h1>This is a heading</h1><p>This is a sample text</p><p class=\"text-es\">Este es un texto de muestra</p><p class=\"text-jp\">これはサンプルテキストです</p><p class=\"text-cn\">这是一个示例文本</p><p class=\"text-thai\">นี่คือข้อความตัวอย่าง</p></body></html>",
"output": "file"
}And the response:
Now that you have made the first manual request, you should proceed and follow the documentation to automate the generation process. Just remember that content must be escaped before sending it to be rendered.
We support all fonts that can be loaded via external CSS file, preferably via CDN, regardless of language. If the browser can render it, it can be used.
Save a publicly accessible URL into a PDF
Using the conversion endpoint URL to PDF, you can specify a public website and configurations such as paper_size (A3, A4, Letter, etc.), orientation, filename, and more. Please refer to the documentation to understand the options that are available fully.
The payload to generate a PDF from the URL is as follows:
{
"url": "https://www.ft.com/",
"paper_size": "a3",
"orientation": "portrait",
"output": "file",
"filename": "Invoice 12345"
}You might need to adjust the orientation and paper size to fit the content of the given website, and you can adjust other formats as you see fit.
Resources:
HTML to PDF doc
URL to PDF doc
HTML Compressor
Example HTML
Updated on: 01/07/2024
Thank you!