POST

/html/pdf

This endpoint is used to convert any valid HTML into a PDF. It allows full configuration options described in the table below to be passed into the json body.

ParamDescription
html
(base64 string)

base64 Encoded HTML string. (This must be base64 encoded, all other formats will be rejected.)

Required
timeout
(number)

Amount of time that Chrome is allowed to run, if exceeded your job will be terminated and you will not be charged.

Default: 30000 ms (30 seconds)
delay
(number)

The amount of time in milliseconds to wait for the page to complete rendering before conversion.

Default: 0
filename
(string)

If used with the inline:false, will set the Content-Disposition filename so that the downloaded file will be set to this value in the users browser. For inline:true it has no effect.

Default: 'file.pdf'
inline
(boolean)

If set to true, set's the Content-Disposition to 'inline', if set to false it will set the Content-Disposition to 'attachment'. See 'filename' property if you want to set the filename value for the attachment.

Default: false
waitForSelector
(waitForSelector)
selector
(string)
A selector of an element on the page to wait for until starting conversion.
options
(waitForSelectorOptions)

Different wait options

visible
(boolean)
Wait until the selector is visible. If you set hidden to true, it will negate this option.
hidden
(boolean)
Wait until the selector is hidden. If you set visible to true, it will negate this option.
timeout
(number)
Amount of time to wait for either of the options within waitForSelector to complete before aborting the request. This is inclusive to timeout property, and delay is additive occurring after this completes.
preferCSSPageSize
(boolean)

Give any CSS @page size declared in the page priority over what is declared in width and height or format options.

Default: false
scale
(boolean)

Scale of the webpage rendering. Defaults to 1. Scale amount must be between 0.1 and 2.

Default: 1
height
(string)

Paper height, accepts values labeled with units.

Default: (empty)
width
(string)

Paper width, accepts values labeled with units.

Default: (empty)
landscape
(boolean)

Paper orientation, false sets it to portrait and true to landscape.

Default: false
pageRanges
(string)

Paper ranges to print, e.g., '1-5, 8, 11-13'. Defaults to the empty string, which means print all pages.

Default: (empty"
autoScroll
(boolean)

Will attempt to auto scroll the page down to the very end. Useful for forcing lazy-loaded content to load.

Default: false
waitUntil
(waitUntil)

When to consider navigation succeeded, defaults to networkidle2 Must be one one of the following values: load, domcontentloaded, networkidle0, networkidle2.

load Consider navigation to be finished when the load event is fired.
domcontentloaded Consider navigation to be finished when the DOMContentLoaded event is fired.
networkidle0 Consider navigation to be finished when there are no more than 0 network connections for at least 500 ms.
networkidle2 Consider navigation to be finished when there are no more than 2 network connections for at least 500 ms.
format
(string)

Paper format to render the PDF. Must be one of the following values in the table below.

Letter 8.5in x 11in (Default)
Legal8.5in x 14in
Tabloid17in x 11in
Ledger11in x 17in
A033.1in x 46.8in
A123.4in x 33.1in
A216.54in x 23.4in
A311.7in x 16.54in
A48.27in x 11.7in
A55.83in x 8.27in
A64.13in x 5.83in
margin
(margin)

Paper margins for top, bottom, right, left.

top

in, px, cm, mm

Default: 0.4in
bottom

in, px, cm, mm

Default: 0.39in
right

in, px, cm, mm

Default: 0.39in
left

in, px, cm, mm

Default: 0.4in
printBackground
(boolean)

Print background graphics.

Default: true
headerTemplate
(headerFooterTemplate)
margin
(margin)
Margin for the Header
style
(CssStyle)
CSS Style for the header outer container.
imageStyle
(CssStyle)
CSS Style for the image inside the header container.
method
(string)

Type of header template.

text
(string)
Use the default text template method.
extract
(string)
Extracts the header from the HTML.
selector
(string)
The selector to use to find the header container in the HTML.
template
(string)
The template string if using template type of text.
footerTemplate
(headerFooterTemplate)
margin
(margin)
Margin for the Header
style
(CssStyle)
CSS Style for the header outer container.
imageStyle
(CssStyle)
CSS Style for the image inside the header container.
method
(string)

Type of header template.

text
(string)
Use the default text template method.
extract
(string)
Extracts the header from the HTML.
selector
(string)
The selector to use to find the header container in the HTML.
template
(string)
The template string if using template type of text.
    {
  "html": "",
  "timeout": 30000,
  "delay": 0,
  "filename": "file.pdf",
  "inline": false,
  "waitForSelector": {
    "selector": "",
    "options": {
      "visible": false,
      "hidden": false,
      "timeout": 0
    }
  },
  "preferCSSPageSize": false,
  "scale": 1,
  "height": "",
  "width": "",
  "landscape": false,
  "pageRanges": "",
  "autoScroll": false,
  "waitUntil": "networkidle2",
  "format": "Letter",
  "margin": {
    "bottom": "0.39in",
    "top": "0.4in",
    "left": "0.4in",
    "right": "0.39in"
  },
  "printBackground": true,
  "headerTemplate": {
    "margin": {
      "bottom": "",
      "top": "",
      "left": "",
      "right": ""
    },
    "style": "{ ...CssStyles }",
    "imageStyle": "{ ...CssStyles }",
    "method": "extract",
    "selector": "",
    "template": ""
  },
  "footerTemplate": {
    "margin": {
      "bottom": "",
      "top": "",
      "left": "",
      "right": ""
    },
    "style": "{ ...CssStyles }",
    "imageStyle": "{ ...CssStyles }",
    "method": "extract",
    "selector": "",
    "template": ""
  }
}
Copied!
Example

For example, if you had the following HTML snippet, and the base64 string of the HTML snippet.

    <!DOCTYPE html>
  <html>
    <body style="background-color: #35276a; color: #fff">
      <script>
        for (let i = 0; i <= 50; i++) {
          const h = document.createElement("h1");
          const par = document.createElement("P");
          h.innerHTML = "Header " + (i + 1);
          h.style.paddingTop = "20px";
          par.innerHTML = "Simple example of a pdf with multiple pages.";
          par.style.paddingBottom = "880px";
          document.body.appendChild(h);
          document.body.appendChild(par);
        }
      </script>
    </body>
  </html>
Copied!

In the above example, we have the HTML snippet, and on the second tab called 'base64' is the HTML snippet encoded into a base64 string. To convert it to a PDF, we pass the base64 string into the HTML property.

Also included in the example is a demonstration of how Javascript gets used in your HTML. It is a simplistic example, but since we use a full Chrome instance to render, you can use mostly anything Chrome supports. The only caveat is that if you are using HTML, it must be embedded or publicly accessible. We support fetching scripts from public CDNs or public sources, for example, and those will get included.

    wget --method POST \
--header 'X-API-Key: <api key>' \
--header 'Content-Type: application/json' \
--body-data \
'{
"html": "PCFET0NUWVBFIGh0bWw+CiAgPGh0bWw+CiAgICA8Ym9keSBzdHlsZT0iYmFja2dyb3VuZC1jb2xvcjogIzM1Mjc2YTsgY29sb3I6ICNmZmYiPgogICAgICA8c2NyaXB0PgogICAgICAgIGZvciAobGV0IGkgPSAwOyBpIDw9IDUwOyBpKyspIHsKICAgICAgICAgIGNvbnN0IGggPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50KCJoMSIpOwogICAgICAgICAgY29uc3QgcGFyID0gZG9jdW1lbnQuY3JlYXRlRWxlbWVudCgiUCIpOwogICAgICAgICAgaC5pbm5lckhUTUwgPSAiSGVhZGVyICIgKyAoaSArIDEpOwogICAgICAgICAgaC5zdHlsZS5wYWRkaW5nVG9wID0gIjIwcHgiOwogICAgICAgICAgcGFyLmlubmVySFRNTCA9ICJTaW1wbGUgZXhhbXBsZSBvZiBhIHBkZiB3aXRoIG11bHRpcGxlIHBhZ2VzLiI7CiAgICAgICAgICBwYXIuc3R5bGUucGFkZGluZ0JvdHRvbSA9ICI4ODBweCI7CiAgICAgICAgICBkb2N1bWVudC5ib2R5LmFwcGVuZENoaWxkKGgpOwogICAgICAgICAgZG9jdW1lbnQuYm9keS5hcHBlbmRDaGlsZChwYXIpOwogICAgICAgIH0KICAgICAgPC9zY3JpcHQ+CiAgICA8L2JvZHk+CiAgPC9odG1sPg=="
}' \
https://api.cloudlayer.io/v1/html/pdf
Copied!
Result

Significantly more complex HTML with embedded images, CSS, etc. can be used as long as they get embedded as base64. For images, you can embed them into the src property as a base64 string. You can read more about how to do that here.

View Example PDF