• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Previewing PDF Files
2
3The **Web** component provides the capability of previewing PDF files on web pages. An application can load a PDF file using the [src](../reference/apis-arkweb/arkts-basic-components-web-i.md#weboptions) parameter and [loadUrl()](../reference/apis-arkweb/arkts-apis-webview-WebviewController.md#loadurl) API of the **Web** component. Based on the source, PDF files are classified into online PDF files, PDF files in the application sandbox, and local PDF files.
4
5To obtain online PDF files, configure the network access permission in the **module.json5** file. For details, see [Declare Permissions in the Configuration File](../security/AccessToken/declare-permissions.md).
6
7  ```
8  "requestPermissions":[
9      {
10        "name" : "ohos.permission.INTERNET"
11      }
12    ]
13  ```
14
15
16In the following example, the online PDF file **www.example.com/test.pdf** is specified to be loaded by default when the **Web** component is created. Replace the example address with an accessible address in practice.
17
18```ts
19// xxx.ets
20import { webview } from '@kit.ArkWeb';
21
22@Entry
23@Component
24struct WebComponent {
25  controller: webview.WebviewController = new webview.WebviewController();
26
27  build() {
28    Column() {
29      Web({
30      	src:
31      	"https://www.example.com/test.pdf",                                    // Method 1: Load an online PDF file.
32      	// this.getUIContext().getHostContext()!.filesDir + "/test.pdf", // Method 2: Load a PDF file from the local application sandbox.
33      	// "resource://rawfile/test.pdf", 						// Method 3: Load a local PDF file (format 1).
34      	// $rawfile('test.pdf'), 								// Method 3: Load a local PDF file (format 2).
35      	controller: this.controller
36      })
37        .domStorageAccess(true)
38    }
39  }
40}
41```
42
43The 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](../reference/apis-arkweb/arkts-basic-components-web-attributes.md#domstorageaccess) permission.
44
45  ```
46  Web().domStorageAccess(true)
47  ```
48
49Specify the PDF file to be loaded by default when the **Web** component is created. When the default PDF file is loaded, if you want to change the PDF file displayed on the **Web** component, you can call the [loadUrl()](../reference/apis-arkweb/arkts-apis-webview-WebviewController.md#loadurl) API to load the specified PDF file. The value of the first parameter **src** of the [Web component](../reference/apis-arkweb/arkts-basic-components-web.md) cannot be dynamically changed through a state variable (for example, @State). To change the value, call [loadUrl()](../reference/apis-arkweb/arkts-apis-webview-WebviewController.md#loadurl).
50
51There are three scenarios for loading and previewing PDF files:
52- Preview and load an online PDF file.
53
54  ```ts
55  Web({
56    src: "https://www.example.com/test.pdf",
57    controller: this.controller
58  })
59    .domStorageAccess(true)
60  ```
61- To preview and load a PDF file in the application sandbox, you need to configure the [fileAccess](../reference/apis-arkweb/arkts-basic-components-web-attributes.md#fileaccess) permission of the file system in the application.
62
63  ```ts
64  Web({
65    src: this.getUIContext().getHostContext()!.filesDir + "/test.pdf",
66    controller: this.controller
67  })
68    .domStorageAccess(true)
69    .fileAccess(true)
70  ```
71- Preview and load a local PDF file.
72
73  ```ts
74  Web({
75    src: "resource://rawfile/test.pdf",            // Format 1: Load a local PDF file.
76    // src: $rawfile('test.pdf'),                  // Format 2: Load a local PDF file.
77    controller: this.controller
78  })
79    .domStorageAccess(true)
80  ```
81
82In addition, you can set PDF file preview parameters to control the page status when the page is opened.
83
84Currently, the following parameters are supported:
85
86| Syntax	| Description|
87| --------- | ---------- |
88| nameddest=destination 	|  Specifies a naming destination in a PDF file.|
89| page=pagenum 	| Specifies the page number with an integer. The **pagenum** value of the first page of the file is **1**.|
90| zoom=scale    zoom=scale,left,top	| Sets the scaling and scrolling coefficients using a floating or integer value. For example, the scaling value **100** indicates 100%. The left and up scrolling values are located in the coordinate system. **0,0** indicates the upper left corner of the visible page, regardless of how the document is rotated.|
91| toolbar=1 \| 0 	| Opens or closes the top toolbar.|
92| navpanes=1 \| 0 	| Opens or closes the side navigation pane.|
93| 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.|
94
95
96URL Examples:
97```
98https://example.com/test.pdf#Chapter6
99https://example.com/test.pdf#page=3
100https://example.com/test.pdf#zoom=50
101https://example.com/test.pdf#page=3&zoom=200,250,100
102https://example.com/test.pdf#toolbar=0
103https://example.com/test.pdf#navpanes=0
104https://example.com/test.pdf#pdfbackgroundcolor=ffffff
105```
106<!--RP1--><!--RP1End-->
107