福昕开发者文档中心

渲染文档 ​

福昕 PDF SDK（Web）在文档打开后会创建对应的渲染对象，并默认渲染当前可见页面。开发者可以通过 PDFViewer、PDFDocRender 或 PDFUI 实例控制页面跳转、缩放、旋转和重绘。

本文介绍常用的文档渲染控制接口。这里的渲染控制只影响查看器中的显示效果，不等同于修改 PDF 文档内容。

获取文档渲染对象 ​

getPDFDocRender() 用于获取当前文档的渲染对象。如果当前没有打开文档，则返回 null。

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

if (!docRender) {
    console.log('当前没有打开文档');
}

PDFDocRender 可用于访问当前文档的视图状态和页面渲染对象。

获取页面渲染对象 ​

getPDFPageRender(index) 用于获取指定页面的渲染对象。页面索引从 0 开始。

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

if (pageRender) {
    console.log('第 1 页渲染对象已获取');
}

页面渲染对象可用于处理与单页显示相关的操作，例如坐标转换、获取页面对象或访问页面上的注释渲染对象。具体可用能力请以 API Reference 中的 PDFPageRender 为准。

跳转页面 ​

PDFDocRender.goToPage(index, offset, isPDFPoint) 用于跳转到指定页面。index 从 0 开始。

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

// 跳转到第 3 页。
await docRender.goToPage(2);

如果需要跳转到页面上的指定位置，可以传入 offset。isPDFPoint 为 true 时，offset 按 PDF 坐标处理；否则按 device 坐标处理。

javascript
// 使用 PDF 坐标跳转到第 1 页的指定位置。
await docRender.goToPage(0, { x: 0, y: 500 }, true);

缩放文档 ​

zoomTo(scale, position) 用于设置查看器缩放比例。scale 可以是数值，也可以是 'fitWidth' 或 'fitHeight'。

javascript
const pdfViewer = await pdfui.getPDFViewer();

// 按比例缩放。
await pdfViewer.zoomTo(1.25);

// 适合页面宽度。
await pdfViewer.zoomTo('fitWidth');

// 适合页面高度。
await pdfViewer.zoomTo('fitHeight');

如果传入数值，缩放比例需要在 PDFViewer 初始化参数允许的最小值和最大值范围内。

旋转视图 ​

rotateTo(degree, options) 用于旋转当前文档的视图显示。该接口只改变查看器中的渲染效果，不会修改 PDF 文档数据。

javascript
const pdfViewer = await pdfui.getPDFViewer();

await pdfViewer.rotateTo(90);

可用角度应为 0、90、180、270，或 90 的倍数。

重绘页面 ​

redraw(force) 用于重绘当前可见页面。

javascript
const pdfViewer = await pdfui.getPDFViewer();

// 重绘当前可见页面。
await pdfViewer.redraw();

// 强制刷新缓存后重绘。
await pdfViewer.redraw(true);

当您通过 API 修改了会影响页面显示的内容后，可以调用 redraw() 更新视图。

控制打开后的初始渲染 ​

打开文档时，isRenderOnDocLoaded 默认值为 true，文档加载完成后会自动渲染。

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

如果需要在渲染前先执行准备逻辑，可以使用 beforeRenderPDFDoc。

javascript
await pdfui.openPDFByFile(file, {
    fileName: file.name,
    beforeRenderPDFDoc: async function(pdfDoc) {
        // 在首次渲染前执行准备逻辑。
    }
});

注意事项 ​

  • getPDFDocRender() 和 getPDFPageRender(index) 依赖当前已打开的文档；文档关闭后不要继续复用旧对象。
  • rotateTo() 只改变视图旋转效果，不会写入 PDF 文档。
  • 高频调用 zoomTo()、redraw() 等渲染接口时，应在业务层控制调用频率，避免造成不必要的渲染开销。
  • 如果需要修改文档内容，请使用对应的文档、页面、注释或表单 API；渲染接口主要用于控制查看器显示。