Guides

页面导航

在使用 CPDFReaderView 组件展示 PDF 时，可以通过API执行以下操作：

跳转到指定页码

await pdfReaderRef.current?.setDisplayPageIndex(1);

当需要跳转到指定页码并同时突出显示某个内容（例如点击注释时高亮该注释），可以通过 setDisplayPageIndex 的 rectList 参数在页面上绘制矩形框。

下面示例展示了在点击注释后跳转到注释所在页，并用矩形框高亮注释区域：

const pageIndex = 0;
const page = pdfReaderRef?.current?._pdfDocument.pageAtIndex(pageIndex);
const annotations = await page?.getAnnotations();
const annotation = annotations![0];

await pdfReaderRef.current?.setDisplayPageIndex(pageIndex: annotation.page, { rectList: [annotation.rect!]});

// 取消高亮
await pdfReaderRef.current?.clearDisplayRect();

效果示例：

Android	iOS

获取当前页码

const pageIndex = await pdfReaderRef.current?.getCurrentPageIndex();

您还可以在使用 CPDFReaderView 时设置页面监听器，实时获取当前滑动的页码。

const pdfReaderRef = useRef<CPDFReaderView>(null);
<CPDFReaderView
  ref={pdfReaderRef}
  document={samplePDF}
  onPageChanged={onPageChanged}
  configuration={ComPDFKit.getDefaultConfig({
  })} />

const onPageChanged = (pageIndex: number) => {
  console.log('ComPDFRN --- onPageChanged:', pageIndex);
}