How do I include Images and other Assets in my PDF?
There are two ways to include your images in the PDF either you have the images available via a public URL or provide a base64 encoded ZIP file within the requests body. The ZIP file is the preferred way as you do not need to provide your assets elsewhere. We support the following filetypes for images:
- gif
- jpeg
- jpg
- png
- SVG
- BMP
- tif
- tiff
Next to images, we also support CSS, JavaScript, and custom Fonts in the assets ZIP if they have one of the filetypes below:
- CSS
- js
- woff
- TTF
- otf
You can reference your ZIP file's content with relative links inside the HTML, CSS, and JavaScript code that you provide in the request body. Let us say we have a base64 encoded ZIP containing three images, tree.png, lake.png, and mountain.png, and you want to show them in your PDF. The requests JSON body would look like the following:
{
"css": "body { color: red; } img {display: block;width: auto;height: 400px;border: 4px solid green;}",
"html": "<h1>Hello PrintCSS Cloud</h1><p>Here is a picture of a tree:</p><img src='tree.png'/><p>and a lake:</p><img src='lake.png' /><p>and we also have a picture of a mountian for you:</p><img src='mountain.png' />",
"assets": "BASE64_ENCODED_ZIP_FILE_CONTAINING_THE_ASSETS"
}To send the request to our API now, you need to subscribe to a plan on RapidAPI. With this, you get the API key that is required to authenticate with our REST service. How to send a request you can see in the "How to create a PDF from my HTML and CSS Code?" article.
The result PDF and Asset ZIP are attached below.