目录

Setting the PDF Document Preview Effects

pdfViewManager provides rich preview features for PDF documents.

Figure 1: Provides the dual-page preview layout, page width adaptation, and continuous scrolling preview mode.

API Description

API Name Description
setPageLayout(columnCount: pdfService.PageLayout): void

Sets the page layout mode. The values of columnCount are as follows:

1: Single-page layout

2: Dual-page layout
setPageContinuous(isContinuous: boolean): void Sets whether the page is scrolled continuously.
setPageFit(pageFit: pdfService.PageFit): void Sets the page fit mode.
goToPage(pageIndex: number): void Redirects to a specified page.
setPageZoom(zoom: number): void Sets the zoom ratio.

Sample Code

  1. Load the PDF document.

  2. Call the PdfView preview component to render the display.

  3. Call the setPageLayout and setPageContinuous methods via the setPreviewMode button to set the document preview effect.

  4. Call the goToPage method via the goTopage button to set page redirection.

  5. Call the setPageZoom method via the zoomPage2 button to zoom in the page by two times.

import { pdfService, PdfView, pdfViewManager } from '@kit.PDFKit';
// ...

@Entry
@Component
struct PdfViewPreviewMethod {
  private controller: pdfViewManager.PdfController = new pdfViewManager.PdfController();
  private context = this.getUIContext().getHostContext() as Context;
  private loadResult: pdfService.ParseResult = pdfService.ParseResult.PARSE_ERROR_FORMAT;

  aboutToAppear(): void {
    // Ensure that the input.pdf document exists in the src/main/resources/resfile project directory.
    let filePath = this.context.resourceDir + '/input.pdf';
    (async () => {
      this.loadResult = await this.controller.loadDocument(filePath);
      // Note: The document is just loaded. Do not set the preview mode of the PDF document immediately.
    })()
  }

  build() {
    Stack({ alignContent: Alignment.TopStart }) {
      PdfView({
        controller: this.controller,
        pageFit: pdfService.PageFit.FIT_WIDTH,
        showScroll: true
      })
        .id('pdfview_app_view')
        .width('100%')
        .height('100%')
        .margin({ top: 150 })

      Column({ space: 10 }) {
        // ...
        Row({ space: 10 }) {
          // Set the preview mode.
          Button('setPreviewMode')
            .onClick(() => {
              if (this.loadResult === pdfService.ParseResult.PARSE_SUCCESS) {
                // Single-page layout
                this.controller.setPageLayout(pdfService.PageLayout.LAYOUT_SINGLE);
                // Whether to continuously scroll the pages.
                this.controller.setPageContinuous(true);
                // Preview mode of the adaptation page.
                this.controller.setPageFit(pdfService.PageFit.FIT_PAGE);
              }
            })
          // Go to page 11.
          Button('goTopage')
            .onClick(() => {
              if (this.loadResult === pdfService.ParseResult.PARSE_SUCCESS) {
                this.controller.goToPage(10);
              }
            })
        }
        Row({ space: 10 }) {
          // Zoom in the page by 2 times.
          Button('zoomPage2')
            .onClick(() => {
              if (this.loadResult === pdfService.ParseResult.PARSE_SUCCESS) {
                this.controller.setPageZoom(2);
              }
            })
        }
      }
      .alignItems(HorizontalAlign.Start)
      .padding(10)
    }
    .width('100%').height('100%')
  }
}