HarmonyOS 鸿蒙Next Web组件预览PDF文件

Web组件预览PDF文件

介绍

本示例通过Web组件实现文件预览，支持PDF, word, excel格式。其中，word和excel仅实现了基本预览功能，例如excel的公式和单元格样式未实现，需自行拓展。

Web组件预览PDF文件源码链接

使用说明

进入应用默认打开预览本地文件页面，点击“选择要预览的本地文件”按钮可选择本地文件，本地PDF,word,excel文件均可预览。
切换到预览网络PDF文件页面，可预览互联网上pdf文件资源，项目已设置网络PDF文件链接。

实现效果

实现思路

本地PDF文件加载

本地PDF文件可通过Web组件直接预览，核心代码如下，源码参考

FilePreview.ets

 PDFView(uri: string) {
    if (this.isHiddenLocalProgress) {
      Progress({
        value: CommonConstants.START_VALUE,
        total: CommonConstants.TOTAL_VALUE,
        type: ProgressType.Linear
      })
        .width(CommonConstants.FULL_PERCENT)
        .height($r('app.integer.progress_height'))
        .value(this.localProgressValue)
        .color(Color.Green)
    }
    Web({ src: uri, controller: this.controller })
      .onProgressChange((event) => {
        if (event) {
          this.localProgressValue = event.newProgress;
          if (this.localProgressValue >= CommonConstants.TOTAL_VALUE) {
            this.isHiddenLocalProgress = false;
          }
        }
      })
      .fileAccess(true)
      .onErrorReceive((event) => {
        if (event) {
          console.log("onErrorReceive +++++++++++++++++" + event.error.getErrorCode() + event.error.getErrorInfo())
        }
      })
      .horizontalScrollBarAccess(true)
      .domStorageAccess(true)
  }

网络PDF文件加载

通过设置网络链接属性，能够对接互联网上的PDF文件资源。提供有效的远程PDF文件URL（REMOTE_URL），实现云端PDF资源的加载与预览。核心代码如下，源码参考

Index.ets

 TabContent() {
          Column() {
            if (this.isHiddenRemoteProgress) {
              Progress({
                value: CommonConstants.START_VALUE,
                total: CommonConstants.TOTAL_VALUE,
                type: ProgressType.Linear
              })
                .width(CommonConstants.FULL_PERCENT)
                .height($r('app.integer.progress_height'))
                .value(this.remoteProgressValue)
                .color(Color.Green)
            }
            Web({
              src: CommonConstants.REMOTE_URL,
              controller: this.controller
            })
              .onProgressChange((event) => {
                if (event) {
                  this.remoteProgressValue = event.newProgress;
                  if (this.remoteProgressValue >= CommonConstants.TOTAL_VALUE) {
                    this.isHiddenRemoteProgress = false;
                  }
                }
              })
              .horizontalScrollBarAccess(true)
              .domStorageAccess(true)
          }
        }
        .width(CommonConstants.FULL_PERCENT)
        .backgroundColor(Color.White)
        .tabBar(
          SubTabBarStyle.of($r('app.string.tab_index_two_title'))
            .indicator({ color: $r('app.color.ohos_id_color_emphasize') })
        )

本地word,excel文件加载

本地word文件加载由纯H5页面实现，通过三方库mammoth将word文件转换为HTML形式，再通过web组件预览文件。

本地excel文件加载由纯H5页面实现，使用ExcelJS加载Excel文件，再将数据导入表格库handsontable，通过web组件预览文件。

工程结构&模块类型

├──entry/src/main/ets/
│  ├──constants
│  │  └──CommonConstants.ets         // 公共常量类
│  ├──entryability
│  │  └──EntryAbility.ets            // 程序入口类
│  ├──pages
│  │  └──Index.ets                   // 应用首页
│  └──utils
│     └──Logger.ets                  // 日志类
└──entry/src/main/resources          // 应用静态资源目录

参考资料

无

更多关于HarmonyOS 鸿蒙Next Web组件预览PDF文件的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

zlyuanteng 1楼•5 天前

更多关于HarmonyOS 鸿蒙Next Web组件预览PDF文件的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

在HarmonyOS（鸿蒙）系统中，Next Web组件预览PDF文件的功能通常依赖于系统内置的文档查看器或第三方PDF阅读器应用。以下是针对该问题的直接回答：

HarmonyOS 鸿蒙Next Web组件预览PDF文件，主要通过以下两种方式实现：

内置文档查看器：
- 鸿蒙系统可能内置了文档查看器，支持PDF等格式的预览。开发者可以调用系统API，将PDF文件路径或URL传递给系统文档查看器，由系统负责打开并显示PDF内容。
第三方PDF阅读器：
- 若系统未内置PDF查看功能，或开发者希望使用特定功能的PDF阅读器，可以集成第三方PDF阅读器SDK或应用。通过SDK提供的接口，开发者可以在Next Web组件中嵌入PDF阅读器，实现PDF文件的预览功能。

请注意，实现该功能的具体步骤和API调用方式可能因鸿蒙系统版本和具体开发环境而异。开发者应参考最新的鸿蒙开发文档和API指南，确保实现方案的兼容性和正确性。

如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html 。