1# Previewing PDF Files
2
3The **Web** component provides the capability of previewing PDF files on web pages. The [src](../reference/apis-arkweb/ts-basic-components-web.md#web) parameter of the **Web** component and the [loadUrl()](../reference/apis-arkweb/js-apis-webview.md#loadurl) API can be used to transfer and load PDF files on the application side. Based on the source of PDF files, there are three common scenarios: loading online PDF files, loading local PDF files, and loading in-application resource PDF files.
4
5When preview and load an online PDF file, declare the network access permission in the **module.json5** file. For details, see [Declaring Permissions](../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 online PDF Files.
32      	// getContext(this).filesDir + "/test.pdf", // Method 2: Load the PDF files from the local application sandbox.
33      	// "resource://rawfile/test.pdf",                                              // Method 3: Load the PDF files from application resource
34      	// $rawfile('test.pdf'),                                                              // Method 4: Load the PDF files from application resource
35      	controller: this.controller
36      })
37        .domStorageAccess(true)
38    }
39  }
40}
41```
42
43In the preceding example, whether the side navigation bar is expanded on the PDF preview page is recorded based on user operations using **window.localStorage**. Therefore, you need to enable the DOM Storage API using [domStorageAccess](../reference/apis-arkweb/ts-basic-components-web.md#domstorageaccess).
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/js-apis-webview.md#loadurl) API to load the specified PDF file. The address of the first parameter variable *src* of [Web](../reference/apis-arkweb/ts-basic-components-web.md#web) component cannot be dynamically changed through a state variable (for example, *@State*). To change the address, reload the variable using [loadUrl()](../reference/apis-arkweb/js-apis-webview.md#loadurl).
50
51There are three scenarios for loading and previewing PDF files:
52- To 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 PDF files in the application sandbox, you need to configure the [fileAccess](../reference/apis-arkweb/ts-basic-components-web.md#fileaccess) permission of the file system in the application:
62
63  ```ts
64  Web({
65    src: getContext(this).filesDir + "/test.pdf",
66    controller: this.controller
67  })
68    .domStorageAccess(true)
69    .fileAccess(true)
70  ```
71- To preview and load a PDF file from an application in either of the following ways (Specifying the following preview parameters is not supported in the **$rawfile('test.pdf')** format):
72
73  ```ts
74  Web({
75    src: "resource://rawfile/test.pdf" // or $rawfile ('test.pdf')
76    controller: this.controller
77  })
78    .domStorageAccess(true)
79  ```
80
81In addition, you can set PDF file preview parameters to control the page status when the page is opened.
82
83Currently, the following parameters are supported:
84
85| Syntax	| Description|
86| --------- | ---------- |
87| nameddest=destination 	|  Specifies a naming destination in a PDF file.|
88| page=pagenum 	| Specifies the page number with an integer. The **pagenum** value of the first page of the file is **1**.|
89| 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.|
90| toolbar=1 \| 0 	| Opens or closes the top toolbar.|
91| navpanes=1 \| 0 	| Opens or closes the side navigation pane.|
92
93
94URL Example
95```
96https://example.com/test.pdf#Chapter6
97https://example.com/test.pdf#page=3
98https://example.com/test.pdf#zoom=50
99https://example.com/test.pdf#page=3&zoom=200,250,100
100https://example.com/test.pdf#toolbar=0
101https://example.com/test.pdf#navpanes=0
102```
103<!--RP1--><!--RP1End-->
104