# Pages

## Content

Each page in a document is represented by a PdfPage object that includes references to the page content and other page attributes. DsPdfJS provides the [PdfPage](https://developer.mescius.com/document-solutions/javascript-pdf-api/api/classes/PdfPage) class so you can work with pages in a [PdfDocument](https://developer.mescius.com/document-solutions/javascript-pdf-api/api/classes/PdfDocument). To get started, add a page to your PDF document by using the [newPage](https://developer.mescius.com/document-solutions/javascript-pdf-api/api/classes/PdfDocument#newpage) method. When you create a page, it is added to the collection of document pages. The collection supports standard operations such as adding, inserting, deleting, and moving pages. You can modify individual pages by setting page properties while creating a PDF document. PdfPage provides properties such as [cropBox](https://developer.mescius.com/document-solutions/javascript-pdf-api/api/classes/PdfPage#cropbox), [mediaBox](https://developer.mescius.com/document-solutions/javascript-pdf-api/api/classes/PdfPage#mediabox), and [rotation](https://developer.mescius.com/document-solutions/javascript-pdf-api/api/classes/PdfPage#rotation).

### Insert a Page

To insert an empty page in a PDF document:

1. Create an object of the [PdfDocument](https://developer.mescius.com/document-solutions/javascript-pdf-api/api/classes/PdfDocument) class.
2. Use the [newPage](https://developer.mescius.com/document-solutions/javascript-pdf-api/api/classes/PdfDocument#newpage)[ ](https://developer.mescius.com/document-solutions/dot-net-pdf-api/api/online/DS.Documents.Pdf/GrapeCity.Documents.Pdf.GcPdfDocument.NewPage.html)method.

>type=note
> **Note:** The examples on this page use helper functions from the [Snippet Helpers](https://developer.mescius.com/document-solutions/javascript-pdf-api/docs/snippet-helpers) module. These utilities are provided only to simplify the examples and are not part of the DsPdfJS API.

```javascript
const doc = new PdfDocument();
// Adds a new blank page
const page = doc.newPage();
```

### Get a particular Page

To get a particular page from a document:

1. Create an instance of the [PdfPageCollection](https://developer.mescius.com/document-solutions/javascript-pdf-api/api/classes/PdfPageCollection) class that includes all the pages added in a PDF document.
2. Use the [getAt](https://developer.mescius.com/document-solutions/javascript-pdf-api/api/classes/PdfPageCollection#getat) method to access any particular page using its index value.

```javascript
// Load an existing PDF
const doc = PdfDocument.load(await Util.loadFile("Wetlands.pdf"));

// Access the PageCollection
const pageCollection = doc.pages;

// Get the first page
const page = pageCollection.getAt(0);
```

### Setting Header and Footer

<span dir="auto" id="content-1776704221570" aria-label="Begin quote, Artion Laska, 4/20/2026 6:20 PM, https://docapp.mescius.io/document-solutions/javascript-pdf-api/docs/v9.1.0/features/pages#setting-…, End quote In a DsPdfJS document, headers and footers can be added by drawing text directly on each page using the page context. By applying consistent layout and alignment, you can include elements like titles, dates, and page numbers across all pages." class="fui-Primitive ___11tzqds f1oy3dpc f89hs3r fqtknz5 fyvcxda">In a DsPdfJS document, headers and footers can be added by drawing text directly on each page using the page context. By applying consistent layout and alignment, you can include elements like titles, dates, and page numbers across all pages.</span>

```javascript
// Text format for headers and footers:
const tf = new ds.Format({ fontSize: 12, foreColor: "Blue" });
// Function to add a header or footer to a page:
function drawHeaderFooter(isFooter, ctx, text, align) {
const tl = new ds.Layout({
    marginAll: 36,
    maxWidth: ctx.width,
    maxHeight: ctx.height,
    textAlignment: align,
    paragraphAlignment: isFooter ? ds.ParagraphAlignment.Far : ds.ParagraphAlignment.Near,
    runs: [ { text, format: tf } ]
});
ctx.drawLayout(tl, 0, 0);
}

// Load a PDF:
const fn = "Wetlands.pdf";
const bytes = await loadFileAsArray(`pdfs/${fn}`);
const doc = ds.PdfDocument.load(bytes);
// Add page headers and footers:
const date = new Date().toLocaleString();
for (let i = 0; i < doc.pages.count; ++i) {
const currCtx = doc.pages.getAt(i).context;
drawHeaderFooter(false, currCtx, "Headers added by DsPdfJS", ds.TextAlignment.Center);
drawHeaderFooter(false, currCtx, date, ds.TextAlignment.Leading);
drawHeaderFooter(false, currCtx, `Page ${(i + 1)} of ${doc.pages.count}`, ds.TextAlignment.Trailing);
drawHeaderFooter(true, currCtx, "Page footer - left", ds.TextAlignment.Leading);
drawHeaderFooter(true, currCtx, "Page footer - right", ds.TextAlignment.Trailing);
}
return doc;
```

![Header-Footer.png](https://cdn.mescius.io/document-site-files/images/706ce9b9-7836-44f3-b62b-7d4408387ae3/Header-Footer-20260424.4a2e8a.png?width=720)

### Get Page Properties

To get page properties:

1. Create an instance of the [PageCollection](https://developer.mescius.com/document-solutions/javascript-pdf-api/api/classes/PdfPageCollection) class that includes all the pages added in a PDF document.
2. Use the [getAt](https://developer.mescius.com/document-solutions/javascript-pdf-api/api/classes/PdfPageCollection#getat) method to access any particular page using its index value.
3. Access its properties.

```javascript
// Load an existing PDF
const doc = PdfDocument.load(await Util.loadFile("Wetlands.pdf"));

// Use the PageCollection object to get a particular page
const pageCollection = doc.pages;
// Get the width and height of first page
const page = pageCollection.getAt(0);
console.log(`Paper Size: ${page.width} x ${page.height}`);
```

### Set Page Properties

To set page properties:

1. Create an object of the [PdfDocument](https://developer.mescius.com/document-solutions/javascript-pdf-api/api/classes/PdfDocument) class.
2. Use the [newPage](https://developer.mescius.com/document-solutions/javascript-pdf-api/api/classes/PdfDocument#newpage)[ ](https://developer.mescius.com/document-solutions/dot-net-pdf-api/api/online/DS.Documents.Pdf/GrapeCity.Documents.Pdf.GcPdfDocument.NewPage.html)method to create a blank new page.
3. Set its properties.

```javascript
const doc = new PdfDocument();
// Adds a new blank page
const page = doc.newPage();

// Set the page property
page.rotate = 90;
```

### Clone a Page

DsPdfJS provides the [clone](https://developer.mescius.com/document-solutions/javascript-pdf-api/api/classes/PdfPageCollection#clone) method on the PageCollection class to clone a page from a specified index in a PDF document and insert it at a specified index in the same document. The clone method also supports two optional Boolean parameters, [cloneAnnotations](https://developer.mescius.com/document-solutions/javascript-pdf-api/api/classes/PdfPageCollection#cloneannotations) and [cloneFields](https://developer.mescius.com/document-solutions/javascript-pdf-api/api/classes/PdfPageCollection#clonefields), which control whether annotations and form fields are cloned with the page.

```javascript
// load PDF document
const doc = PdfDocument.load(await Util.loadFile("AddAcroFormFields.pdf"));

// Clone page at index 0 and insert it at index 1
doc.pages.clone(0, 1, true, true);
// Save the PDF document.
Util.saveFile("ClonePage.pdf", doc.savePdf());
```