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.
"requestPermissions":[
// ...
{
"name" : "ohos.permission.INTERNET"
}
], 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.
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)
}
}
} 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.
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.
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.
Web({
src: this.getUIContext().getHostContext()!.filesDir + "/test.pdf",
controller: this.controller
})
.domStorageAccess(true)
.fileAccess(true) Preview and load a local PDF file.
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) The following parameters are supported:
| 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:
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
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.
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.
onPdfLoadEvent is triggered when the loading succeeds or fails.
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.
Web({
src: 'https://www.example.com/test.pdf',
controller: this.controller
})
.onPdfScrollAtBottom(
(eventInfo: OnPdfScrollEvent) => {
console.info(`Scroll at bottom callback called. url: ${eventInfo.url}.`)
}
)