Developer Docs

Link Generator

Link Setup

Pass input files as GET parameters, in JSON format:

Don't forget to URL encode the JSON value:

Add a returnEmail parameter to the URL if you would like the user to be asked if they want to send the edited document by email back to you.

Remember to URL encode the email address value passed in:

How it works

Copy & paste snippet

Always save the current page as PDF:

<a id="saveAsPdfBtn" href="https://www.sejda.com/html-to-pdf">Save as PDF</a>
<script>
document.getElementById('saveAsPdfBtn').addEventListener('click', function(e){
  var pageUrl = encodeURIComponent(window.location.href);
  var opts = ['save-link=' + pageUrl, 'pageOrientation=auto'];
  window.open('https://www.sejda.com/html-to-pdf?' + opts.join('&'));
  e.preventDefault();
});
</script>

Customize

More options can be specified:

Authentication

Sign up for an account to get started and get your API key.

Provide your API key in the Authorization header of each request:

Authorization: Token: api_Y0URAP1K3YH3R3

Want to use in the browser/client side javascript? Use the publishable key instead: see CORS sample code.

Get started

Run this CURL command in your console:

$> curl -i https://api.sejda.com/v2/html-pdf\
  --fail --silent --show-error \
  --header "Content-Type: application/json" \
  --header "Authorization: Token: api_Y0URAP1K3YH3R3" \
  --data '{"url": "https://www.example.com", "viewportWidth":1200 }' > example_com.pdf

Endpoint URL

The API is organized around REST.

https://api.sejda.com/v2/html-pdf

Request

Make a POST request with JSON body:

Content-Type: application/json

Examples:

{"url":"example.com"}

Converting HTML code (instead of an URL) to PDF:

{"htmlCode":"<strong>HTML<\/strong>"}

HTML to PDF Options

HTTP Response Codes

CSS Tricks

Hide elements in PDF

Add the CSS class --hide-from-pdf to remove that element from the PDF.

<div class="--hide-from-pdf">Hide me</div>

Show elements only in PDF

Use the CSS class --show-in-pdf and the inline CSS style="display: none" to show in PDF an element that is hidden in HTML. When rendering the PDF the inline style will be changed to display: block.

<div class="--show-in-pdf" style="display:none">Show me</div>

Page breaks & footer

Try this CSS style to force page breaks:

<style>
  .with-page-break {
    page-break-before: always;
    page-break-after: always;
  }
</style>
              

Example: Same footer on each page:

<style>
  .with-page-break {
    page-break-before: always;
    page-break-after: always;
  }
  .footer {
    position: fixed;
    bottom: 0;
  }
</style>
<div class="with-page-break">Page 1</div>
<div class="with-page-break">Page 2</div>
<div class="with-page-break">Page 3</div>
<div class="footer">This is a footer</div>
              

Example: Different footer each page, at the bottom:

<style>
  html,body { height: 100%; margin: 0; }  
  .page {
    page-break-before: always;
    page-break-after: always;
    height: 100%;
    overflow: hidden;  
    margin: 0;
    position: relative;
  }
  .page-footer {
    position: absolute;
    bottom: 5px;
  }
</style>
<div class="page">
  <div class="page-contents">Page 1</div>
  <div class="page-footer">Page 1 footer</div>
</div>
<div class="page">
  <div class="page-contents">Page 2</div>
  <div class="page-footer">Page 2 footer</div>
</div>

Make sure you specify a pageSize (eg: a4) and the hideNotices parameter is not set (or is set to false)

Page numbers

To add current page numbers and total pages count to a page footer (eg: "Page 1 of 5") you can use Javascript. Here's an example:

<style>
    html,body { height: 100%; margin: 0; }
    .page {
        page-break-before: always;
        page-break-after: always;
        height: 100%;
        overflow: hidden;
        margin: 0;
        position: relative;
    }
    .page-footer {
        position: absolute;
        bottom: 5px;
    }
</style>
<div class="page">
  <div class="page-contents">Page 1</div>
  <div class="page-footer">
    <span class="js-page-number"></span> / <span class="js-pages-total"></span>
  </div>
</div>
<div class="page">
  <div class="page-contents">Page 2</div>
  <div class="page-footer">
    <span class="js-page-number"></span> / <span class="js-pages-total"></span>
  </div>
</div>
<div class="page">
  <div class="page-contents">Page 3</div>
  <div class="page-footer">
    <span class="js-page-number"></span> / <span class="js-pages-total"></span>
  </div>
</div>
<script>
  (function() {
    let pageCounter = 1;
    const pageNumElems = document.getElementsByClassName('js-page-number');
    Array.from(pageNumElems).forEach((elem) => {
      elem.innerHTML = pageCounter;
      pageCounter++;
    });

    const totalPagesCount = document.querySelectorAll('.page').length;
    const pageTotals = document.getElementsByClassName('js-pages-total');
    Array.from(pageTotals).forEach((elem) => {
      elem.innerHTML = totalPagesCount;
    });
  })()
</script>

Using Google web fonts in your PDF documents

Here's an example on how to use Google web fonts.

<html>
<head>
<link href="https://fonts.googleapis.com/css2?family=Merriweather&display=swap" rel="stylesheet">
<style>
body {
 font-family: 'Merriweather', serif;
 font-size: 30px;
}
</style>
</head>
<body>Almost before we knew it, we had left the ground.</body>
</html>

Specific page size (A4, Letter)

Ensure your HTML will render well in a specific page size (A4, Letter, etc.) when converted to PDF.

<style>
@page {
    size: A4;
    margin: 0;
}
.page {
    width: 210mm;
    height: 297mm;
    margin: 0;
}
</style>

<div class="page">Page 1</div>
<div class="page">Page 2</div>
              

Stronger guarantee that page is fully loaded

On complex pages, ensure all content is fully loaded before converting to PDF. Avoids potential partial content issues.

When you decide the page finished loading (eg: your last ajax section was rendered), inject a special dom element on page.

var el = document.createElement('div');

el.style.display = 'none';
el.id = 'pageFullyLoaded';

document.body.appendChild(el);
              

Then make your API requests include "waitForSelector":"#pageFullyLoaded".

We'll wait for the selector to appear in page, then begin the PDF conversion.

Using the "waitForSelector" will not extend the timeout for the API request, the maximum time we wait for the page to load and convert it to PDF stays the same.

Code Samples

HTML to PDF in Bash Curl

$> curl -i https://api.sejda.com/v2/html-pdf\
  --fail --silent --show-error \
  --header "Content-Type: application/json" \
  --header "Authorization: Token: api_Y0URAP1K3YH3R3" \
  --data '{"url": "https://example.com", "viewportWidth":1200 }' > out.pdf

HTML to PDF in Node.js Javascript

// npm install request
const request = require('request');
const fs = require('fs');

var opts = {
  uri: 'https://api.sejda.com/v2/html-pdf',
  headers: {
    'Authorization' : 'Token: ' + apiKey,
  },
  json: {
    'url': 'https://example.com',
    'viewportWidth': 1200
  }
};

request.post(opts)
  .on('error', function(err){
    return console.error(err);
  })
  .on('response', function(response) {
    if (response.statusCode === 200) {
      response.pipe(fs.createWriteStream('/tmp/out.pdf'))
        .on('finish', function () {
          console.log('PDF saved to disk');
        });
    } else {
      return console.error('Got code: ' + response.statusCode);
    }
  });

HTML to PDF in Python

import requests

url = 'https://api.sejda.com/v2/html-pdf'
r = requests.post(url, json = {
    'url': 'https://example.com',
    'viewportWidth': 1200
  }, headers = {
    'Authorization': 'Token: {}'.format(apiKey)
  })
open('/tmp/out.pdf', 'wb').write(r.content)

HTML to PDF in Javascript with CORS

<script src="//www.sejda.com/js/sejda-js-api.min.js"></script>
<script>
  document.getElementById('downloadPdfBtn')
    .addEventListener('click', function(e){
      SejdaJsApi.htmlToPdf({
        filename: 'out.pdf',
        /* leave blank for one long page */
        pageSize: 'a4',
        publishableKey: 'api_public_y0urap1k3yh3r3',
        htmlCode: document.querySelector('html').innerHTML,
        /* url: window.location.href */
        always: function() {
          // PDF download should have started
        },
        error: function(err) {
          console.error(err);
          alert('An error occurred');
        }
      });
    })
</script>
/* Don't forget to configure your API Allowed domains, on your account page. */

HTML to PDF in Java

<!-- Maven dependency -->
<dependency>
  <groupId>org.apache.httpcomponents</groupId>
  <artifactId>httpclient</artifactId>
	<version>4.5.8</version>
</dependency>

import org.apache.http.HttpResponse;
import org.apache.http.client.methods.HttpPost;
import org.apache.http.entity.ContentType;
import org.apache.http.entity.StringEntity;
import org.apache.http.impl.client.CloseableHttpClient;
import org.apache.http.impl.client.HttpClientBuilder;

CloseableHttpClient httpClient = HttpClientBuilder.create().build();
HttpPost request = new HttpPost("https://api.sejda.com/v2/html-pdf");
request.setHeader(HttpHeaders.AUTHORIZATION, "Token: " + apiKey);
request.setEntity(new StringEntity(
    "{\"url\": \"https://example.com\", \"viewportWidth\":1200 }",
    ContentType.APPLICATION_JSON));

HttpResponse response = httpClient.execute(request);
if (response.getStatusLine().getStatusCode() == 200) {

    try (InputStream in = response.getEntity().getContent();
         OutputStream out = new FileOutputStream(new File("/tmp/out.pdf"))) {
        byte[] buffer = new byte[8 * 1024];
        int bytesRead;
        while ((bytesRead = in.read(buffer)) != -1) {
            out.write(buffer, 0, bytesRead);
        }
    }
}

HTML to PDF in PHP

$url = "https://api.sejda.com/v2/html-pdf";
$content = json_encode(array('url' => 'https://example.com'));

$curl = curl_init($url);
curl_setopt($curl, CURLOPT_HEADER, false);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);

curl_setopt($curl, CURLOPT_HTTPHEADER, array(
  "Content-type: application/json",
  "Authorization: Token: " . $apiKey));

curl_setopt($curl, CURLOPT_POST, true);
curl_setopt($curl, CURLOPT_POSTFIELDS, $content);

$response = curl_exec($curl);

$status = curl_getinfo($curl, CURLINFO_HTTP_CODE);

if ($status == 200) {
  $fp = fopen("out.pdf", "w");
  fwrite($fp, $response);
  fclose($fp);
  print("PDF saved to disk");
} else {
  print("Error: failed with status $status, response $response, curl_error " . curl_error($curl) . ", curl_errno " . curl_errno($curl));
}

HTML to PDF in C# .NET

using System.Net.Http;
using Newtonsoft.Json.Linq;

var baseUrl = "https://api.sejda.com/v2/html-pdf";

using (var client = new HttpClient())
{
  client.DefaultRequestHeaders.TryAddWithoutValidation(
      "Authorization", "Token: " + apiKey
  );

  var json = new JObject();
  json.Add("url", "https://example.com");
  json.Add("viewportWidth", 1200);
  //json.Add("htmlCode", File.ReadAllText(@"c:\doc.html", Encoding.UTF8));

  var content = new StringContent(json.ToString(), Encoding.UTF8, "application/json");

  using (var res = await client.PostAsync(baseUrl, content))
  {
    var statusCode = (int)res.StatusCode;

    if (statusCode == 200)
    {
      var httpStream = await res.Content.ReadAsStreamAsync();
      var outputFilePath = Path.GetTempFileName();
      using (var fileStream = File.Create(outputFilePath))
      using (var reader = new StreamReader(httpStream))
      {
        httpStream.CopyTo(fileStream);
        fileStream.Flush();
      }
      // outputFilePath contains the PDF output
    }
    else
    {
      // retry, then handle error
      throw new Exception("Unexpected response code: " + statusCode);
    }
  }
}