Foxit Developer

Page objects ​

Page objects are graphics in the PDF page content stream—text, images, paths, and similar. Foxit PDF SDK for Web can read objects on a page, hit-test by point or rectangle, and add, remove, or change object properties.

Related APIs include:

  • PDFPage.getGraphicsObjectsCount(): Count graphics objects on a page.
  • PDFPage.getGraphicsObjectByIndex(): Get an object by index.
  • PDFPage.getGraphicsObjectAtPoint(): Hit-test at a PDF point.
  • PDFPage.getGraphicsObjectsByRect(): Get objects in a rectangle.
  • PDFPage.addGraphicsObject(): Add text, image, or path objects.
  • PDFPage.addImage(): Add an image object.
  • PDFPage.removeGraphicsObject(): Remove an object.
  • GraphicsObject.getRect(), GraphicsObject.setRect(), GraphicsObject.setMatrix(), GraphicsObject.setFillColor(), GraphicsObject.setOpacity(): Common geometry and style.
  • TextObject.setText(), TextObject.setFontSize(), TextObject.setBold(), TextObject.setItalic(): Text content and style.
  • ImageObject.setRotation(): Image rotation.

Iterate page objects ​

javascript
const page = await pdfDoc.getPageByIndex(0);
const count = await page.getGraphicsObjectsCount();

for (let i = 0; i < count; i++) {
    const object = await page.getGraphicsObjectByIndex(i);
    console.log(object.getType(), object.getRect());
}

Get objects by position ​

getGraphicsObjectAtPoint(point, tolerance, type) uses PDF coordinates. type can be a value from PDFViewCtrl.PDF.constant.Graphics_ObjectType.

javascript
const object = await page.getGraphicsObjectAtPoint(
    [100, 100],
    3,
    PDFViewCtrl.PDF.constant.Graphics_ObjectType.All
);

By rectangle:

javascript
const objects = await page.getGraphicsObjectsByRect({
    rect: { left: 100, right: 300, top: 700, bottom: 600 },
    tolerance: 0,
    type: PDFViewCtrl.PDF.constant.Graphics_ObjectType.All
});

Add an image object ​

javascript
const imageBuffer = await fetch('/assets/logo.png').then(res => res.arrayBuffer());

await page.addImage(imageBuffer, {
    left: 100,
    right: 220,
    top: 720,
    bottom: 640
});

Add graphics objects ​

PDFPage.addGraphicsObject(info) adds text, image, or path objects. Parameters depend on type.

javascript
await page.addGraphicsObject({
    type: PDFViewCtrl.PDF.constant.Graphics_ObjectType.Text,
    originPosition: { x: 100, y: 700 },
    text: 'Hello Foxit',
    fillColor: 0xFF000000,
    font: {
        standardId: PDFViewCtrl.PDF.constant.Font_StandardID.e_StdIDCourier
    },
    matrix: [1, 0, 0, 1, 0, 0]
});

Modify or remove objects ​

javascript
const object = await page.getGraphicsObjectByIndex(0);

await object.setOpacity(0.8);
await object.setRect({
    left: 100,
    right: 300,
    top: 720,
    bottom: 650
});

await page.removeGraphicsObject(object);

After changing page content, export the file and redraw the Viewer if needed.

javascript
await pdfViewer.redraw(true);

const file = await pdfDoc.getFile({
    fileName: 'page-objects.pdf'
});

Notes ​

  • Page object APIs modify PDF page content; export or save when done.
  • Coordinates are PDF coordinates, not Viewer device pixels.
  • Adding or changing objects usually requires document modification permission.
  • Text, image, and path objects support different properties—check object type first.
  • To read text only, use Text extraction; for watermarks on pages, prefer Watermarks.