The PDF document preview capability of Web components

#harmonyosnext

Previewing PDF Documents with Web Components in HarmonyOS Next

Overview

The Web component in HarmonyOS Next provides the capability to preview PDF documents within web pages. Applications can load PDF documents using the src parameter or the loadUrl() interface of the Web component. Depending on the source of the PDF document, there are three common scenarios: loading PDF documents from the internet, loading local PDF documents, and loading PDF documents from application resources.

Prerequisites

If your PDF preview involves fetching documents from the internet, ensure that you have configured the necessary network access permissions in the module.json5 file:

"requestPermissions":[
    {
      "name" : "ohos.permission.INTERNET"
    }
]

For more information on declaring permissions in the configuration file, refer to the official documentation.

Example: Loading PDF Documents

In the following example, the Web component is configured to load a PDF document from the internet by default. The URL https://www.example.com/test.pdf is used as an example and should be replaced with a real, accessible address.

Application-Side Code

// 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 PDF from the internet
          // getContext(this).filesDir + "/test.pdf", // Method 2: Load local PDF from the application sandbox
          // "resource://rawfile/test.pdf", // Method 3: Load PDF from application resources
          // $rawfile('test.pdf'), // Method 4: Load PDF from application resources
          controller: this.controller 
      })
        .domStorageAccess(true)
    }
  }
}

Explanation

Method 1: Load a PDF document from the internet using a URL.
Method 2: Load a local PDF document from the application's sandbox directory. This requires the fileAccess permission.
Method 3: Load a PDF document from the application's resources using the resource://rawfile/ scheme.
Method 4: Load a PDF document from the application's resources using the $rawfile function.

Configuring PDF Preview Parameters

You can control the initial state of the PDF preview by configuring specific parameters in the URL. The supported parameters include:

nameddest=destination: Specifies a named destination within the PDF document.
page=pagenum: Specifies the page number in the document, with the first page being 1.
zoom=scale zoom=scale,left,top: Sets the zoom level and scroll position. For example, a zoom value of 100 represents 100% zoom. The scroll values are based on the coordinate system, with 0,0 being the top-left corner of the visible page, regardless of document rotation.
toolbar=1 | 0: Opens or closes the top toolbar.
navpanes=1 | 0: Opens or closes the side navigation pane.

URL Examples

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