Open a Document

Foxit PDF SDK for Web supports opening PDF documents from local file streams or HTTP Range Requests. Common entry points include PDFUI.openPDFByFile and PDFUI.openPDFByHttpRangeRequest in UIExtension, and the corresponding PDFViewCtrl APIs.

If you use the full UI (UIExtension), open documents through a PDFUI instance first. If you integrate only the PDFViewCtrl base Viewer, open documents through a PDFViewer instance.

Open with a File Stream

openPDFByFile opens PDF data of type File, Blob, ArrayBuffer, TypedArray, or DataView. Use it for local files, files chosen from an upload control, or scenarios where you already have the full binary stream.

Open with UIExtension

// PDFUI
const pdfui = new UIExtension.PDFUI({
    viewerOptions: {
        libPath: './lib',
        jr: {
            licenseSN: licenseSN,
            licenseKey: licenseKey
        }
    },
    renderTo: '#pdf-ui'
});

const response = await fetch('/docs/FoxitPDFSDKforWeb_DemoGuide.pdf');
const buffer = await response.arrayBuffer();
await pdfui.openPDFByFile(buffer, {
    fileName: 'FoxitPDFSDKforWeb_DemoGuide.pdf'
});

Open with PDFViewCtrl

const pdfViewer = new PDFViewCtrl.PDFViewer({
    libPath: './lib',
    jr: {
        licenseSN: licenseSN,
        licenseKey: licenseKey
    }
});

pdfViewer.init('#pdf-viewer');

const response = await fetch('/docs/FoxitPDFSDKforWeb_DemoGuide.pdf');
const buffer = await response.arrayBuffer();
await pdfViewer.openPDFByFile(buffer, {
    fileName: 'FoxitPDFSDKforWeb_DemoGuide.pdf'
});

Open with HTTP Range Request

openPDFByHttpRangeRequest reads PDF data on demand through Range requests. It suits larger files or cases where you do not want to load the entire file into browser memory at once.

await pdfui.openPDFByHttpRangeRequest({
    range: {
        url: '/docs/FoxitPDFSDKforWeb_DemoGuide.pdf'
    }
}, {
    fileName: 'FoxitPDFSDKforWeb_DemoGuide.pdf'
});

If the document service requires request headers, set them in range.headers:

await pdfui.openPDFByHttpRangeRequest({
    range: {
        url: '/api/files/demo.pdf',
        headers: {
            Authorization: 'Bearer <token>'
        }
    }
}, {
    fileName: 'demo.pdf'
});

NOTE

When using HTTP Range Request, the server must correctly support cross-origin access and Range requests. Common configuration includes Accept-Ranges, Content-Range, and CORS response headers.

Common Open Options

The following options apply to typical document open scenarios:

Option	Description
fileName	Specifies the document file name.
password	Specifies the open password for an encrypted document.
isRenderOnDocLoaded	Whether to render immediately after the document loads. Default is true.
beforeRenderPDFDoc	Callback before document render; use it to import data or run preparation logic before rendering.
annotsJson	Imports initial annotation JSON when opening the document.
fdf	Imports FDF data when opening the document.

Example: open an encrypted document.

await pdfui.openPDFByFile(file, {
    fileName: file.name,
    password: 'owner-password'
});

Example: run preparation logic before rendering.

await pdfui.openPDFByFile(file, {
    fileName: file.name,
    beforeRenderPDFDoc: async function(pdfDoc) {
        // Import annotations, form data, or run other pre-render preparation here.
    }
});

Handle Open Failures

Open APIs return a Promise. Catch exceptions in application code and show prompts appropriate to your scenario.

try {
    await pdfui.openPDFByFile(file, {
        fileName: file.name
    });
} catch (error) {
    console.error('Failed to open document', error);
}

Notes

• Before opening a new document, the SDK closes the currently open document.
• For large remote documents, prefer openPDFByHttpRangeRequest.
• For local files or binary data you already have in full, use openPDFByFile.
• Opening with ArrayBuffer is efficient to read, but large files consume more browser memory.