harmony 鸿蒙Previewing PDF Files
Previewing PDF Files
The Web component provides the capability of previewing PDF files on web pages. The src parameter of the Web component and the 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.
When preview and load an online PDF file, declare the network access permission in the module.json5 file. For details, see Declaring Permissions.
"requestPermissions":[
{
"name" : "ohos.permission.INTERNET"
}
]
In 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.
// xxx.ets
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 online PDF Files.
// getContext(this).filesDir + "/test.pdf", // Method 2: Load the PDF files from the local application sandbox.
// "resource://rawfile/test.pdf", // Method 3: Load the PDF files from application resource
// $rawfile('test.pdf'), // Method 4: Load the PDF files from application resource
controller: this.controller
})
.domStorageAccess(true)
}
}
}
In 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.
Web().domStorageAccess(true)
Specify 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() API to load the specified PDF file. The address of the first parameter variable src of Web component cannot be dynamically changed through a state variable (for example, @State). To change the address, reload the variable using loadUrl().
There are three scenarios for loading and previewing PDF files: - To preview and load an online PDF file:
Web({
src: "https://www.example.com/test.pdf",
controller: this.controller
})
.domStorageAccess(true)
- To preview and load PDF files in the application sandbox, you need to configure the fileAccess permission of the file system in the application:
Web({
src: getContext(this).filesDir + "/test.pdf",
controller: this.controller
})
.domStorageAccess(true)
.fileAccess(true)
- 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):
Web({
src: "resource://rawfile/test.pdf" // or $rawfile ('test.pdf')
controller: this.controller
})
.domStorageAccess(true)
In addition, you can set PDF file preview parameters to control the page status when the page is opened.
Currently, 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 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. |
toolbar=1 |0 | Opens or closes the top toolbar. |
navpanes=1 |0 | Opens or closes the side navigation pane. |
URL Example
https://example.com/test.pdf#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
你可能感兴趣的鸿蒙文章
harmony 鸿蒙Taking Over the Media Playback on Web Pages
harmony 鸿蒙Mutual Invoking Between the Application and the Frontend Page (C/C++)
harmony 鸿蒙Establishing a Data Channel Between the Application and the Frontend Page (C/C++)
harmony 鸿蒙Enabling Ads Blocking
harmony 鸿蒙Establishing a Data Channel Between the Application and the Frontend Page
harmony 鸿蒙Migrating Web Components Between Different Windows
harmony 鸿蒙Introduction to ArkWeb
- 所属分类: 后端技术
- 本文标签:
热门推荐
-
2、 - 优质文章
-
3、 gate.io
-
8、 golang
-
9、 openharmony
-
10、 Vue中input框自动聚焦