HarmonyOS鸿蒙Next中实现文件预览功能示例代码

HarmonyOS鸿蒙Next中实现文件预览功能示例代码

介绍

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

实现文件预览功能源码链接

效果预览

图片名称

使用说明

  1. 进入应用默认打开预览本地文件页面，点击“选择要预览的本地文件”按钮可选择本地文件，本地PDF,word,excel文件均可预览。
  2. 切换到预览网络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组件预览文件。


更多关于HarmonyOS鸿蒙Next中实现文件预览功能示例代码的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

点击右上角的下载图标后无法进行下载

更多关于HarmonyOS鸿蒙Next中实现文件预览功能示例代码的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


开发者您好，您的问题已收到，我们的研发人员正在处理中，请耐心等待。

开发者您好，源码已更新，当前效果是将文件下载沙箱里，可以在沙箱里面查看。若未解决，请您留言评论告知，感谢您的支持。

在HarmonyOS（鸿蒙）Next中实现文件预览功能，可以使用FilePicker和FilePreview组件。以下是示例代码：

import filePicker from '@ohos.file.picker';
import filePreview from '@ohos.file.preview';

async function openFilePicker() {
    try {
        const filePickerInstance = filePicker.createFilePicker();
        const result = await filePickerInstance.select();
        const uri = result[0];
        if (uri) {
            const filePreviewInstance = filePreview.createPreview();
            await filePreviewInstance.previewFile(uri);
        }
    } catch (error) {
        console.error('File picker or preview failed:', error);
    }
}

以上代码实现了文件选择器的打开和文件预览功能。首先通过filePicker.createFilePicker()创建文件选择器实例，然后调用select()方法让用户选择文件。选择文件后，使用filePreview.createPreview()创建文件预览实例，并调用previewFile(uri)方法预览文件。如果在过程中出现错误，会通过console.error输出错误信息。

在HarmonyOS鸿蒙Next中，你可以使用FileManager和ImageView组件来实现文件预览功能。以下是一个简单的示例代码，展示如何预览图片文件：

import ohos.aafwk.ability.Ability;
import ohos.aafwk.content.Intent;
import ohos.agp.components.Image;
import ohos.agp.components.ImageView;
import ohos.global.resource.RawFileEntry;
import ohos.media.image.ImageSource;
import ohos.media.image.PixelMap;
import ohos.media.image.common.PixelFormat;
import ohos.utils.net.Uri;

public class PreviewAbility extends Ability {
    private ImageView imageView;

    @Override
    protected void onStart(Intent intent) {
        super.onStart(intent);
        // 设置布局文件
        setUIContent(ResourceTable.Layout_ability_preview);

        // 获取ImageView组件
        imageView = (ImageView) findComponentById(ResourceTable.Id_imageView);

        // 获取文件路径
        String filePath = "/data/storage/el1/base/cache/sample.jpg";

        // 加载并显示图片
        loadImage(filePath);
    }

    private void loadImage(String filePath) {
        try {
            // 创建ImageSource对象
            ImageSource imageSource = ImageSource.create(filePath, null);

            // 解码图片为PixelMap
            PixelMap pixelMap = imageSource.createPixelmap(null);

            // 将PixelMap设置到ImageView中
            imageView.setPixelMap(pixelMap);
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
}

这个示例代码展示了如何在HarmonyOS中加载并显示本地图片文件。你可以根据需要扩展此代码以支持其他文件类型的预览。

回到顶部