HarmonyOS NEXT应用开发之Web组件预览PDF文件实现案例

最新推荐文章于 2025-04-21 13:56:37 发布

码中之牛

最新推荐文章于 2025-04-21 13:56:37 发布

阅读量2.2k

点赞数 18

分类专栏：鸿蒙 Harmony OS OpenHarmony 文章标签： harmonyos 前端 pdf 移动开发鸿蒙开发华为

本文链接：https://blog.youkuaiyun.com/weixin_61845324/article/details/136888565

版权

本文介绍了如何在HarmonyOS应用中，通过Web组件实现本地PDF和网络PDF的预览，包括使用resource协议加载本地文件和配置网络链接加载远程文件，以及如何处理Progress和DOMStorageAPI。还提到了相关的工程结构和模块依赖，以及学习资源链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

介绍

本案例通过Web组件实现预览本地PDF文件和预览网络PDF文件，代码为Tabs容器组件包含了两个独立的TabContent子组件，分别标示为预览本地PDF文件和预览网络PDF文件。每个子组件内部构建一个Web组件。第一个Web组件利用resource协议关联本地PDF文件路径以预览本地存储的PDF资源；第二个Web组件则通过配置网络链接属性，实现从互联网加载并预览远程PDF文件内容。

效果图预览

使用说明

进入页面默认预览本地PDF文件，点击预览网络PDF文件按钮可以切换到预览网络PDF文件模块。

实现思路

本地PDF加载:通过resource协议（需在工程resources/rawfile 目录下添加PDF文件,通过RESOURCE_URL获取的PDF文件）来实现本地PDF文件资源的装载与呈现，在无需网络连接的情况下，也能顺利加载并预览用户本地PDF资源。

Web({ src: $rawfile(RESOURCE_URL), controller: this.controller })
  .onProgressChange((event) => {
    if (event) {
      this.localProgressValue = event.newProgress
        if (this.localProgressValue >&

最低0.47元/天解锁文章