The Web component supports previewing PDF files in web pages. However, due to performance limitations, frame drops may occur in some scenarios. If smoothness is required, use PdfView or the third-party parsing library PDF.js. An app loads a PDF document through the src parameter of WebOptions and the loadUrl() API. Specific scenarios include network PDF documents, PDF documents in the app sandbox, and local PDF documents.

To obtain network documents, you need to configure the network access permission in the module.json5 file. For details, see Declaring Permissions in the Configuration File.

Collapse
Word wrap
Dark theme
Copy code
"requestPermissions":[
  // ...
  {
    "name" : "ohos.permission.INTERNET"
  }
],
module.json5

Loading Different PDF Files

In the following example, the network PDF document https://www.example.com/test.pdf is specified as the default PDF document to be loaded when the Web component is created. Replace it with an actual accessible URL.

Collapse
Word wrap
Dark theme
Copy code
import { webview } from '@kit.ArkWeb';

@Entry
@Component
struct WebComponent {
  controller: webview.WebviewController = new webview.WebviewController();

  build() {
    Column() {
      Web({
        src:
        'https://www.example.com/test.pdf',                     // Method 1: Load a network PDF file.
          // this.getUIContext().getHostContext()!.filesDir + '/test.pdf', // Method 2: Load a PDF file from the local application sandbox.
          // 'resource://rawfile/test.pdf',                         // Method 3: Load a local PDF file (format 1).
          // $rawfile('test.pdf'),                                 // Method 3: Load a local PDF file (format 2).
          controller: this.controller
      })
        .domStorageAccess(true)
    }
  }
}
PreviewPDF.ets

The PDF preview page uses window.localStorage to record the expansion status of the navigation bar based on user operations. Therefore, you need to declare the domStorageAccess permission.

Collapse
Word wrap
Dark theme
Copy code
Web().domStorageAccess(true)

When creating the Web component, specify the default PDF document to be loaded. After the default PDF document is loaded, if you need to change the PDF document displayed by the Web component, call the loadUrl() API to load the specified PDF document. The first parameter variable src of WebOptions cannot be dynamically changed through a state variable (for example, @State). To change the address, reload it through loadUrl().

There are three scenarios for loading and previewing PDF files:

Preview and load an online PDF file.

Collapse
Word wrap
Dark theme
Copy code
Web({
  src: "https://www.example.com/test.pdf",
  controller: this.controller
})
  .domStorageAccess(true)

To preview and load a PDF file in the application sandbox, you need to configure the fileAccess permission of the file system in the application.
Collapse
Word wrap
Dark theme
Copy code
```
Web({
  src: this.getUIContext().getHostContext()!.filesDir + "/test.pdf",
  controller: this.controller
})
  .domStorageAccess(true)
  .fileAccess(true)
```

Preview and load a local PDF file.

Collapse
Word wrap
Dark theme
Copy code
Web({
  src: "resource://rawfile/test.pdf",            // Format 1: Load a local PDF file.
  // src: $rawfile('test.pdf'),                  // Format 2: Load a local PDF file.
  controller: this.controller
})
  .domStorageAccess(true)

Controlling the PDF File Preview Page Status

The following parameters are supported:

Expand

Syntax	Description
nameddest=destination	Specifies a naming destination in a PDF file.
page=pagenum	Specifies the page number with an integer. The pagenum value of the first page of the file is 1.
zoom=scale,left,top	Sets the zoom and scroll factors using floating-point or integer values. For example, a zoom value of 100 indicates a zoom factor of 100%. The left and top scroll values are in a coordinate system where 0,0 represents the top-left corner of the visible page, regardless of how the document is rotated. scale is a required parameter. left and top are optional parameters.
toolbar=1 or 0	1 indicates that the top toolbar is displayed. 0 indicates that the top toolbar is hidden.
navpanes=1 or 0	1 indicates that the side navigation pane is displayed. 0 indicates that the side navigation pane is hidden.
pdfbackgroundcolor=color	Specifies the background color of a PDF file. The value of color is a six-digit hexadecimal number in RGB format. The value ranges from 000000 to ffffff. For example, ffffff indicates white. This parameter is supported since HarmonyOS 6.0.

URL example:

Collapse
Word wrap
Dark theme
Copy code
https://example.com/test.pdf#nameddest=Chapter6
https://example.com/test.pdf#page=3
https://example.com/test.pdf#zoom=50
https://example.com/test.pdf#page=3&zoom=200,250,100
https://example.com/test.pdf#toolbar=0
https://example.com/test.pdf#navpanes=0
https://example.com/test.pdf#pdfbackgroundcolor=ffffff

Using the PDF File Preview Callback

Since API version 20, PDF document preview supports two callback functions: the loading success/failure callback and the callback triggered when the page scrolls to the bottom.

onPdfLoadEvent is triggered when the loading succeeds or fails.

Collapse
Word wrap
Dark theme
Copy code
Web({
  src: 'https://www.example.com/test.pdf',
  controller: this.controller
})
  .onPdfLoadEvent(
    (eventInfo: OnPdfLoadEvent) => {
      console.info(`Load event callback called. url: ${eventInfo.url}, result: ${eventInfo.result}.`)
    }
  )

Callback triggered when the page scrolls to the bottom.

Collapse
Word wrap
Dark theme
Copy code
Web({
  src: 'https://www.example.com/test.pdf',
  controller: this.controller
})
  .onPdfScrollAtBottom(
    (eventInfo: OnPdfScrollEvent) => {
      console.info(`Scroll at bottom callback called. url: ${eventInfo.url}.`)
    }
  )

Sample Code

Previewing PDF Files Using the Web Component

Saving a Frontend Page as a PDF File

Calculating and Adjusting Safe Area Insets

Send feedback

Was this page helpful?

Send feedback

Reach out to us through the community for any other questions.

Community Q&A Intelligent Assistant