HarmonyOS 如何实现pdf文件在线预览及下载功能？

Question

如题：HarmonyOS 如何实现pdf文件在线预览及下载功能？

Answer 1

请参考以下demo示例：

在module.json5中设置requestPermissions属性值

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

pdf预览：

import web_webview from '@ohos.web.webview';
@Entry
@Component
struct Index {
  webController: web_webview.WebviewController = new web_webview.WebviewController();
  build() {
    Column() {
      // 加载线上PDF
      Web({ src: 'http:www.pdf.com', controller: this.webController })
        .mixedMode(MixedMode.All)
        .javaScriptAccess(true)
        .domStorageAccess(true)
    }
  }
}

pdf下载demo如下：

下载完成之后可以到文件的相对路径ide界面的右下角Device File Browser-\>data-\>app-\>e2-\>100-\>base-\>com.example.myapplication(这里的myapplication是指项目名称)-\>hsp-\>entry-\>filesk可以找到下载的内容。

import common from '@ohos.app.ability.common';
import request from '@ohos.request';
import { BusinessError } from '@ohos.base';
import { webview } from '@kit.ArkWeb'
// 获取应用文件路径 
let context = getContext(this) as common.UIAbilityContext;
let filesDir = context.filesDir;
@Entry @Component
export struct PdfPage {
  @State message: string = 'Hello World';
  @State urlPdf:string=''
  private webviewController: WebviewController = new webview.WebviewController();
  build() {
    Row() {
      Scroll() {
        Column(){
          Button('下载') .onClick(() => {
            try {
              console.log('downloadTask1 filesDir' + filesDir + '/00sg00izg2.pdf');
              //下载文件 
              this.urlPdf = '/00sg00izg2.pdf'
              request.downloadFile(context, {
                url: 'https://www.pdf.com',
                filePath: filesDir + '/00sg00izg2.pdf'
              }).then((downloadTask: request.DownloadTask) => {
                //开启回调 
                downloadTask.on('complete', () => {
                  console.info('downloadTask1 complete====');
                })
              }).catch((err: BusinessError) => {
                console.error(`Invoke downloadTask failed-----, code is ${err.code}, message is ${err.message}`);
              }); } catch (error) {
              let err: BusinessError = error as BusinessError;
              console.error(`Invoke downloadTask downloadFile failed====, code is ${err.code}, message is ${err.message}`); } })
            .width('100%') } }
      .height('100%') } }}

文件路径不合法或文件路径下文件已存在解决方案：

以同步方法检查文件是否存在：使用accessSync，参考链接：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-file-fs-V5\#fsaccesssync

如何实现文件不存在则创建文件：可以通过调用函数fs.open来实现，open(path: string, mode?: number)，指定第二个参数mode为fs.OpenMode.CREATE，表示若文件不存在，则创建文件。参考链接：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-file-fs-V5\#fsopen