DocRaptor Home

How to create a PDF with Page Numbers

Adding page numbers to PDF documents is difficult to impossible with open-source HTML to PDF tools, but it's really easy with DocRaptor's API!

Because we're designed as a document generation tool, our CSS is aware of your document—including page numbers. To add page numbers with a really simple footer, just add this CSS:

@page {
  @bottom {
    content: "Page " counter(page, upper-alpha) " of " counter(pages, decimal);
  }
}

You can also reset the page count like so:

#page4 {
  counter-reset: page 1
}

To see all that in action, use this example HTML code:

Page 1
Page 2
Page 3
Page 4, with reset page counter

Finally, try out these full code samples in a variety of languages that will actually generate a PDF with page numbers:

Code Examples

Test API Key:
YOUR_API_KEY_HERE

Using DocRaptor's API

Below are the basics of using DocRaptor's HTTP API. It can easily be used in any programming language, but if we don't have a native agent for your language, please let us know! That'll help us write the best examples and agents.

The API key shown here, YOUR_API_KEY_HERE, actually works! Use it for testing without creating an account. The only requirement is test mode must be used (test parameter set to true).

To make documents, send a POST request to this URL:

https://YOUR_API_KEY_HERE@docraptor.com/docs

Send JSON-encoded API parameters (you'll need to set an HTTP header for Content-Type as application/json). These are the only required parameters:

{
  "type": "pdf",
  "document_content": "Hello World!"
}

Generating the Document with cURL

Here's a completely functional code sample for this tutorial:

cat <<-'PDF_OPTIONS' > pdf_options.json
  {
    "test": true,
    "document_content": "<div style=\"page-break-after: always;\">Page 1</div><div style=\"page-break-after: always;\">Page 2</div><div style=\"page-break-after: always;\">Page 3</div><div id=\"page4\" style=\"page-break-after: always;\">Page 4, with reset page counter</div><style>@page {@bottom {content: \"Page \" counter(page, upper-alpha) \" of \" counter(pages, decimal);}}#page4 {counter-reset: page 1}</style>",
    "document_type": "pdf"
  }
PDF_OPTIONS

curl https://YOUR_API_KEY_HERE@docraptor.com/docs \
  --fail --silent --show-error \
  --header "Content-Type:application/json" \
  --data @pdf_options.json \
  > page-numbers.pdf

Downloads

Here are all the files you need to follow this tutorial:

Related Tutorials & Documentation

See the complete PDF tutorial list or review the documentation for additional info, such as generating asynchronous documents.

Frameworks supported

  • .NET 4.0 or later
  • Windows Phone 7.1 (Mango)

Dependencies

Installing the .NET Agent

With Nuget:

nuget.exe install DocRaptor

With the Package Manager Console:

Install-Package DocRaptor

You can also download the DLL directly from GitHub.

Generating the Document

The API key shown here, YOUR_API_KEY_HERE, actually works! Use it for testing without creating an account. The only requirement is test mode must be used (test parameter set to true).

using DocRaptor.Client;
using DocRaptor.Model;
using DocRaptor.Api;
using System;
using System.IO;

class Example
{
    static void Main(string[] args)
    {
        DocApi docraptor = new DocApi();
        docraptor.Configuration.Username = "YOUR_API_KEY_HERE";

        try
        {
            Doc doc = new Doc(
                name: "page-numbers",
                test: true, // test documents are free but watermarked
                documentContent: System.IO.File.ReadAllText(@"page-numbers-content.html"), 
                // documentUrl: "http://docraptor.com/examples/invoice.html", // or use a url
                documentType: Doc.DocumentTypeEnum.Pdf
                // javascript: false, // enables JavaScript processing
            );

            byte[] create_response = docraptor.CreateDoc(doc);
            File.WriteAllBytes("page-numbers.pdf", create_response);
        } catch (DocRaptor.Client.ApiException error) {
            Console.Write(error.ErrorContent);
        }
    }
}

Downloads

Here are all the files you need to follow this tutorial:

Related Tutorials & Documentation

See the complete PDF tutorial list or review the documentation for additional info, such as generating asynchronous documents.

Install the Java Agent

Add the com.docraptor package to your project. For example, with Maven you'd add the DocRaptor package to your pom.xml:

<dependency>
  <groupId>com.docraptor</groupId>
  <artifactId>docraptor</artifactId>
  <version>2.0.0</version>
</dependency>

And then install it:

mvn install com.docraptor

Generating the Document

The API key shown here, YOUR_API_KEY_HERE, actually works! Use it for testing without creating an account. The only requirement is test mode must be used (test parameter set to true).

import com.docraptor.*;
import java.io.*;
import java.net.*;
import java.nio.file.*;

public class Sync {

  public static void main(String[] args) throws Exception {
    DocApi docraptor = new DocApi();
    ApiClient client = docraptor.getApiClient();
    client.setUsername("YOUR_API_KEY_HERE");

    try {
      Doc doc = new Doc();
      doc.setTest(true); // test documents are free but watermarked
      doc.setDocumentContent(
        new String(Files.readAllBytes(Paths.get("page-numbers-content.html")))
      );

      // doc.setDocumentUrl("http://docraptor.com/examples/invoice.html"); // or use a url
      doc.setDocumentType(Doc.DocumentTypeEnum.PDF);

      // doc.setJavascript(false); // enables JavaScript processing

      byte[] createResponse = docraptor.createDoc(doc);
      FileOutputStream file = new FileOutputStream(
        "page-numbers.pdf"
      );
      file.write(createResponse);
      file.close();
    } catch (ApiException error) {
      System.err.println(error);
      System.err.println(error.getCode());
      System.err.println(error.getMessage());
      System.err.println(error.getResponseBody());
    }
  }
}

Downloads

Here are all the files you need to follow this tutorial:

Related Tutorials & Documentation

See the complete PDF tutorial list or review the documentation for additional info, such as generating asynchronous documents.

The DocRaptor JavaScript Library

The DocRaptor JavaScript library makes it easy to create PDFs with JavaScript. The library does not require jQuery, but you can use jQuery to define your document content. When a PDF is requested, the library constructs a hidden form and submits it to the DocRaptor API. The form is necessary to trigger the browser download window.

This library exposes your API key in your website source code. This code should never be used in a publicly-accessible location, instead try using our referrer-based API or a server-side agent such as PHP or Ruby.

JavaScript Example

<html>
  <head>
    <script src="https://docraptor.com/docraptor-1.0.0.js"></script>
    <script>
      var downloadPDFOf = function(selector) {
        DocRaptor.createAndDownloadDoc("YOUR_API_KEY_HERE", {
          name: "page-numbers",
          test: true, // test documents are free but watermarked
          document_content: document.querySelector(selector).innerHTML,
          // document_url: "http://docraptor.com/examples/invoice.html", // or use a url
          document_type: "pdf"
          // javascript: false, // enables JavaScript processing
        });
      };
    </script>
    <style>
      @media print {
        #pdf-button {
          display: none;
        }
      }
    </style>
  </head>
  <body>
    <div style="page-break-after: always;">Page 1</div>
    <div style="page-break-after: always;">Page 2</div>
    <div style="page-break-after: always;">Page 3</div>
    <div id="page4" style="page-break-after: always;">
      Page 4, with reset page counter
    </div>

    <style>
      @page {
        @bottom {
          content: "Page " counter(page, upper-alpha) " of "
            counter(pages, decimal);
        }
      }

      #page4 {
        counter-reset: page 1;
      }
    </style>
    <button id="pdf-button" type="button" onclick="downloadPDFOf('html')">
      Download PDF
    </button>
  </body>
</html>

Downloads

Here are all the files you need to follow this tutorial:

Related Tutorials & Documentation

See the complete PDF tutorial list or review the documentation for additional info, such as generating asynchronous documents.

DocRaptor & Node.js

The best way to use DocRaptor with Node.js is directly through our HTTP API. In this example, we'll use the request module, but you can obviously use any HTTP client you'd like.

Install the Request Module

npm install request

Generating the Document

The API key shown here, YOUR_API_KEY_HERE, actually works! Use it for testing without creating an account. The only requirement is test mode must be used (test parameter set to true).

const request = require("request");
const fs = require("fs");

document_content = `
  <div style="page-break-after: always;">Page 1</div>
  <div style="page-break-after: always;">Page 2</div>
  <div style="page-break-after: always;">Page 3</div>
  <div id="page4" style="page-break-after: always;">Page 4, with reset page counter</div>

  <style>
    @page {
      @bottom {
        content: "Page " counter(page, upper-alpha) " of " counter(pages, decimal);
      }
    }

    #page4 {
      counter-reset: page 1
    }
  </style>
`;

config = {
  url: "https://docraptor.com/docs",
  encoding: null, //IMPORTANT! This produces a binary body response instead of text
  headers: {
    "Content-Type": "application/json"
  },
  json: {
    user_credentials: "YOUR_API_KEY_HERE",
    doc: {
      test: true, // test documents are free but watermarked
      document_content: document_content,
      // document_url: "http://docraptor.com/examples/invoice.html", // or use a url
      document_type: "pdf"
      // javascript: false, // enables JavaScript processing
    }
  }
};

request.post(config, function(error, response, body) {
  if (response.statusCode == 200) {
    fs.writeFile(
      "page-numbers.pdf",
      body,
      "binary",
      function(writeErr) {
        if (writeErr) throw writeErr;
        console.log(
          "Saved page-numbers.pdf!"
        );
      }
    );
  } else {
    console.error("Error converting to PDF!", body.toString());
  }
});

Downloads

Here are all the files you need to follow this tutorial:

Related Tutorials & Documentation

See the complete PDF tutorial list or review the documentation for additional info, such as generating asynchronous documents.

Installing the PHP Agent

composer require docraptor/docraptor

Generating the Document

The API key shown here, YOUR_API_KEY_HERE, actually works! Use it for testing without creating an account. The only requirement is test mode must be used (test parameter set to true).

<?php

$docraptor = new DocRaptor\DocApi();
$docraptor->getConfig()->setUsername("YOUR_API_KEY_HERE");

$document_content = <<<DOCUMENT_CONTENT
  <div style="page-break-after: always;">Page 1</div>
  <div style="page-break-after: always;">Page 2</div>
  <div style="page-break-after: always;">Page 3</div>
  <div id="page4" style="page-break-after: always;">Page 4, with reset page counter</div>

  <style>
    @page {
      @bottom {
        content: "Page " counter(page, upper-alpha) " of " counter(pages, decimal);
      }
    }

    #page4 {
      counter-reset: page 1
    }
  </style>
DOCUMENT_CONTENT;

try {
    $doc = new DocRaptor\Doc();
    $doc->setTest(true); # test documents are free but watermarked
    $doc->setDocumentContent($document_content);
    # $doc->setDocumentUrl("http://docraptor.com/examples/invoice.html"); # or use a url
    $doc->setDocumentType("pdf");
    # $doc->setJavascript(false); # enables JavaScript processing

    $create_response = $docraptor->createDoc($doc);

    $pdf = fopen(
        'page-numbers.pdf',
        "wb"
    );
    fwrite($pdf, $create_response);
    fclose($pdf);
} catch (DocRaptor\ApiException $error) {
    echo $error . "\n";
    echo $error->getMessage() . "\n";
    echo $error->getCode() . "\n";
    echo $error->getResponseBody() . "\n";
}

Downloads

Here are all the files you need to follow this tutorial:

Related Tutorials & Documentation

See the complete PDF tutorial list or review the documentation for additional info, such as generating asynchronous documents.

Installing the Python Agent

pip install --upgrade docraptor

Generating the Document

The API key shown here, YOUR_API_KEY_HERE, actually works! Use it for testing without creating an account. The only requirement is test mode must be used (test parameter set to true).

import docraptor

doc_api = docraptor.DocApi()
doc_api.api_client.configuration.username = 'YOUR_API_KEY_HERE'

document_content = r"""
    <div style="page-break-after: always;">Page 1</div>
    <div style="page-break-after: always;">Page 2</div>
    <div style="page-break-after: always;">Page 3</div>
    <div id="page4" style="page-break-after: always;">Page 4, with reset page counter</div>

    <style>
      @page {
        @bottom {
          content: "Page " counter(page, upper-alpha) " of " counter(pages, decimal);
        }
      }

      #page4 {
        counter-reset: page 1
      }
    </style>
"""

try:
    response = doc_api.create_doc({
        'test': True,  # test documents are free but watermarked
        'document_content': document_content,
        # 'document_url': 'http://docraptor.com/examples/invoice.html', # or use a url
        'document_type': 'pdf',
        # 'javascript': False, # enables JavaScript processing
    })

    with open('page-numbers.pdf', 'w+b') as f:
        binary_formatted_response = bytearray(response)
        f.write(binary_formatted_response)
        f.close()
except docraptor.rest.ApiException as error:
    print(error.status)
    print(error.reason)
    print(error.body)

Downloads

Here are all the files you need to follow this tutorial:

Related Tutorials & Documentation

See the complete PDF tutorial list or review the documentation for additional info, such as generating asynchronous documents.

Installing the Ruby Agent

Add or require the docraptor gem to your project or script.

Generating the Document

The API key shown here, YOUR_API_KEY_HERE, actually works! Use it for testing without creating an account. The only requirement is test mode must be used (test parameter set to true).

require "docraptor"

DocRaptor.configure do |config|
  config.username = "YOUR_API_KEY_HERE"
end

$docraptor = DocRaptor::DocApi.new

document_content = <<~'DOCUMENT_CONTENT'
  <div style="page-break-after: always;">Page 1</div>
  <div style="page-break-after: always;">Page 2</div>
  <div style="page-break-after: always;">Page 3</div>
  <div id="page4" style="page-break-after: always;">Page 4, with reset page counter</div>

  <style>
    @page {
      @bottom {
        content: "Page " counter(page, upper-alpha) " of " counter(pages, decimal);
      }
    }

    #page4 {
      counter-reset: page 1
    }
  </style>
DOCUMENT_CONTENT

begin
  response = $docraptor.create_doc(
    test: true, # test documents are free but watermarked
    document_content: document_content,
    # document_url: "http://docraptor.com/examples/invoice.html", # or use a url
    document_type: "pdf"
    # javascript: false, # enables JavaScript processing
  )

  File.open("page-numbers.pdf", "wb") do |file|
    file.write(response)
  end
rescue DocRaptor::ApiError => error
  puts "#{error.class}: #{error.message}"
  puts error.code
  puts error.response_body
  puts error.backtrace[0..3].join("\n")
end

Downloads

Here are all the files you need to follow this tutorial:

Related Tutorials & Documentation

See the complete PDF tutorial list or review the documentation for additional info, such as generating asynchronous documents.

Ready to get started? Try DocRaptor for free with unlimited test documents.