福昕开发者文档中心

打开文档 ​

福昕 PDF SDK（Web）支持通过本地文件流或 HTTP Range Request 打开 PDF 文档。常用入口包括 UIExtension 的 PDFUI.openPDFByFile、PDFUI.openPDFByHttpRangeRequest，以及 PDFViewCtrl 对应的接口

如果您使用完整 UI（UIExtension），请优先通过 PDFUI 实例打开文档；如果您只集成 PDFViewCtrl 基础 Viewer，则通过 PDFViewer 实例打开文档。

使用文件流打开文档 ​

openPDFByFile 可用于打开 File、Blob、ArrayBuffer、TypedArray 或 DataView 类型的 PDF 数据。对于本地文件、上传控件选择的文件，或已经获取到完整二进制流的场景，可使用该接口。

使用 UIExtension 打开 ​

javascript
// 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'
});

使用 PDFViewCtrl 打开 ​

javascript
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'
});

使用 HTTP Range Request 打开文档 ​

openPDFByHttpRangeRequest 会通过 Range 请求按需读取 PDF 数据，适合较大文件或不希望一次性加载完整文件到浏览器内存的场景。

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

如果文档服务需要请求头，可在 range.headers 中设置：

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

备注：

使用 HTTP Range Request 时，服务器需要正确支持跨域和 Range 请求。常见配置包括 Accept-Ranges、Content-Range 以及 CORS 响应头。

常用打开选项 ​

以下选项适用于常见打开文档场景：

选项说明
fileName指定文档文件名。
password指定加密文档的打开密码。
isRenderOnDocLoaded是否在文档加载完成后立即渲染，默认值为 true。
beforeRenderPDFDoc文档渲染前的回调，可用于在渲染前导入数据或执行准备逻辑。
annotsJson打开文档时导入初始注释 JSON 数据。
fdf打开文档时导入 FDF 数据。

示例：打开加密文档。

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

示例：在渲染前执行准备逻辑。

javascript
await pdfui.openPDFByFile(file, {
    fileName: file.name,
    beforeRenderPDFDoc: async function(pdfDoc) {
        // 可以在这里导入注释、表单数据，或执行其他渲染前准备。
    }
});

打开失败处理 ​

打开接口返回 Promise。建议在业务代码中捕获异常，并根据应用场景显示提示。

javascript
try {
    await pdfui.openPDFByFile(file, {
        fileName: file.name
    });
} catch (error) {
    console.error('打开文档失败', error);
}

注意事项 ​

  • 打开新文档前，SDK 会先关闭当前已打开的文档。
  • 对于较大的远程文档，建议优先使用 openPDFByHttpRangeRequest。
  • 对于本地文件或已经完整获取到的二进制数据，可使用 openPDFByFile。
  • ArrayBuffer 打开方式读取效率较高，但大文件会占用更多浏览器内存。