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, you need to configure the [ohos.permission.INTERNET](../security/AccessToken/declare-permissions.md) to obtain network access permission.
6
7
8In the following example, the online PDF file **www.example.com/test.pdf** to be loaded by default is specified when the **Web** component is created. Replace the example address with the accessible address when you use it.
9
10```ts
11// xxx.ets
12import { webview } from '@kit.ArkWeb';
13
14@Entry
15@Component
16struct WebComponent {
17  controller: webview.WebviewController = new webview.WebviewController();
18
19  build() {
20    Column() {
21      Web({ 
22      	src: 
23      	"https://www.example.com/test.pdf",                                    // Method 1: Load online PDF Files.
24      	// "file://" + getContext(this).filesDir + "/test.pdf", // Method 2: Load the PDF files from the local application sandbox.
25      	// "resource://rawfile/test.pdf",                                              // Method 3: Load the PDF files from application resource 
26      	// $rawfile('test.pdf'),                                                              // Method 4: Load the PDF files from application resource 
27      	controller: this.controller 
28      })
29        .domStorageAccess(true)
30    }
31  }
32}
33```
34
35In 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).
36
37  ```
38  Web().domStorageAccesss(true)
39  ```
40
41Specify 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).
42
43There are three scenarios for loading and previewing PDF files:
44- Preview and load an online PDF file:
45
46  ```
47  Web({ 
48    src: "https://www.example.com/test.pdf",
49    controller: this.controller 
50  })
51    .domStorageAccess(true)
52  ```
53- Preview and load a  PDF file from the application sandbox:
54
55  ```
56  Web({ 
57    src: "file://" + getContext(this).filesDir + "/test.pdf",
58    controller: this.controller 
59  })
60    .domStorageAccess(true)
61  ```
62- Preview and load a PDF file from the application resource in either of the following ways: The preview parameters described below cannot be specified in the **$rawfile('test.pdf')** format.
63
64  ```
65  Web({ 
66    src: "resource://rawfile/test.pdf" // or $rawfile ('test.pdf')
67    controller: this.controller 
68  })
69    .domStorageAccess(true)
70  ```
71
72In addition, you can set PDF file preview parameters to control the page status when the page is opened.
73
74Currently, the following parameters are supported: 
75
76| Syntax	| Description |
77| --------- | ---------- |
78| nameddest=destination 	|  Specifies a naming destination in a PDF file. |
79| page=pagenum 	| Specifies the page number with an integer. The **pagenum** value of the first page of the file is **1**.|
80| 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. |
81| toolbar=1 \| 0 	| Opens or closes the top toolbar. |
82| navpanes=1 \| 0 	| Opens or closes the side navigation pane. |
83
84
85URL Example 
86```
87https://example.com/test.pdf#Chapter6  
88https://example.com/test.pdf#page=3  
89https://example.com/test.pdf#zoom=50  
90https://example.com/test.pdf#page=3&zoom=200,250,100  
91https://example.com/test.pdf#toolbar=0  
92https://example.com/test.pdf#navpanes=0  
93```
94