Foxit Developer

Render document ​

Foxit PDF SDK for Web creates render objects after a document opens and renders visible pages by default. You can control page navigation, zoom, rotation, and redraw through PDFViewer, PDFDocRender, or PDFUI.

This page covers common viewer rendering controls. Rendering here affects display only; it does not modify PDF content.

Get the document render object ​

getPDFDocRender() returns the render object for the current document, or null if none is open.

javascript
const pdfViewer = await pdfui.getPDFViewer();
const docRender = pdfViewer.getPDFDocRender();

if (!docRender) {
    console.log('No document is open');
}

Use PDFDocRender to access view state and page render objects.

Get a page render object ​

getPDFPageRender(index) returns the render object for a page. Page index starts at 0.

javascript
const pdfViewer = await pdfui.getPDFViewer();
const pageRender = pdfViewer.getPDFPageRender(0);

if (pageRender) {
    console.log('Page 1 render object obtained');
}

Page render objects support single-page display operations such as coordinate conversion, page objects, and annotation render objects on the page. See API Reference for PDFPageRender for the full surface.

Go to a page ​

PDFDocRender.goToPage(index, offset, isPDFPoint) navigates to a page. index starts at 0.

javascript
const pdfViewer = await pdfui.getPDFViewer();
const docRender = pdfViewer.getPDFDocRender();

// Go to page 3.
await docRender.goToPage(2);

To jump to a position on the page, pass offset. When isPDFPoint is true, offset is in PDF coordinates; otherwise device coordinates.

javascript
// Go to a position on page 1 using PDF coordinates.
await docRender.goToPage(0, { x: 0, y: 500 }, true);

Zoom ​

zoomTo(scale, position) sets viewer zoom. scale may be a number or 'fitWidth' / 'fitHeight'.

javascript
const pdfViewer = await pdfui.getPDFViewer();

// Scale by ratio.
await pdfViewer.zoomTo(1.25);

// Fit page width.
await pdfViewer.zoomTo('fitWidth');

// Fit page height.
await pdfViewer.zoomTo('fitHeight');

Numeric scale must stay within the min/max range set in PDFViewer initialization options.

Rotate view ​

rotateTo(degree, options) rotates the document view. This changes display only, not PDF data.

javascript
const pdfViewer = await pdfui.getPDFViewer();

await pdfViewer.rotateTo(90);

Valid angles are 0, 90, 180, 270, or multiples of 90.

Redraw pages ​

redraw(force) redraws currently visible pages.

javascript
const pdfViewer = await pdfui.getPDFViewer();

// Redraw visible pages.
await pdfViewer.redraw();

// Force cache refresh then redraw.
await pdfViewer.redraw(true);

Call redraw() after API changes that affect what is shown on screen.

Initial rendering when opening ​

isRenderOnDocLoaded defaults to true, so the document renders after load.

javascript
await pdfui.openPDFByFile(file, {
    fileName: file.name,
    isRenderOnDocLoaded: true
});

To run setup before the first render, use beforeRenderPDFDoc:

javascript
await pdfui.openPDFByFile(file, {
    fileName: file.name,
    beforeRenderPDFDoc: async function(pdfDoc) {
        // Preparation before first render.
    }
});

Notes ​

  • getPDFDocRender() and getPDFPageRender(index) require an open document; do not reuse objects after close.
  • rotateTo() affects view rotation only; it is not written into the PDF.
  • Avoid calling zoomTo(), redraw(), and similar APIs at high frequency to limit rendering cost.
  • To change document content, use document, page, annotation, or form APIs; rendering APIs control the viewer display.