多格式文件在线预览,提升移动设备文件处理效率与体验

随着移动设备处理文档的需求日益增加,传统的文件处理方式需要用户将文件下载到本地,再通过相应的软件打开,这种方式不仅效率低,而且需要安装多种软件以兼容不同文件格式,用户期望能够在App内直接预览各种格式的文件。

在线预览技术可以快速浏览和筛选文件,节省用户时间和精力,提升用户体验。随着文件数量的增多,用户需要预览的文件格式也越来越丰富,包括但不限于文档、PDF、图片、视频等,以满足用户多样化的需求。

HarmonyOS SDK文件预览服务(Preview Kit)为应用提供便捷的文件快速预览服务。应用可以通过Preview Kit提供的预览API,快速启动预览界面,实现对各类文件的预览。

通过Preview Kit,用户可以对用户文件(包括图片、视频、音频、文本、html等)进行内容查看。同时用户还可以通过点击右上角的"使用其他应用打开"的按钮跳转到具体的应用进行展示,从而进行其他操作,如图片的旋转、放大等。

目前,Preview Kit实现pptx、docx、xlxs等主流办公文档类型的预览能力,主要是借助WPS的能力实现的,预览界面会有WPS提供的技术支持,并展示WPS的入口,统一按照文件预览的风格进行页面布局。

场景介绍

Preview Kit能够对图片、视频、音频、文本、html进行预览查看,满足绝大多数办公开发的需求,包括:

• 预览展示:呈现文件的基本内容,如文本、图片等,支持选中多文件,在预览列表切换显示。

• 文件分享:将文件以分享的形式传给另一个软件。

• 使用其他软件打开:使用预览打开时,会获取到该文件类型的默认打开软件,然后点击"使用其他应用打开"进行跳转。

• 图片翻转放大:在非2in1设备时,预览能够对图片进行旋转放大等处理。

支持的文件类型

Preview Kit支持图片、视频、音频、文本、html以及文件夹进行查看,具体类型如下:

开发步骤

  1. 导入相关模块。

    import { filePreview } from '@kit.PreviewKit';
    import { BusinessError } from '@kit.BasicServicesKit';

  2. 判断是否可以预览。

    let uri = 'file://docs/storage/Users/currentUser/Documents/1.txt';
    let uiContext = getContext(this);
    filePreview.canPreview(uiContext, uri).then((result) => { // 传入支持的文件类型且项目存在时会返回true
    console.info(Succeeded in obtaining the result of whether it can be previewed. result = ${result});
    }).catch((err: BusinessError) => {
    console.error(Failed to obtain the result of whether it can be previewed, err.code = ${err.code}, err.message = ${err.message});
    });

  3. 调用openPreview,实现打开文件预览的功能。

通过Promise方式打开文件

复制代码
let uiContext = getContext(this);
let displayInfo: filePreview.DisplayInfo = {
  x: 100,
  y: 100,
  width: 800,
  height: 800
};
let fileInfo: filePreview.PreviewInfo = {
  title: '1.txt',
  uri: 'file://docs/storage/Users/currentUser/Documents/1.txt',
  mimeType: 'text/plain'
};
filePreview.openPreview(uiContext, fileInfo, displayInfo).then(() => {
  console.info('Succeeded in opening preview');
}).catch((err: BusinessError) => {
  console.error(`Failed to open preview, err.code = ${err.code}, err.message = ${err.message}`);
});

通过CallBack回调函数方式打开文件

复制代码
let uiContext = getContext(this);
let displayInfo: filePreview.DisplayInfo = {
  x: 100,
  y: 100,
  width: 800,
  height: 800
};
let fileInfo: filePreview.PreviewInfo = {
  title: '1.txt',
  uri: 'file://docs/storage/Users/currentUser/Documents/1.txt',
  mimeType: 'text/plain'
};
filePreview.openPreview(uiContext, fileInfo, displayInfo, (err) => {
  if (err && err.code) {
    console.error(`Failed to open preview, err.code = ${err.code}, err.message = ${err.message}`);    
    return;
  }
  console.info('Succeeded in opening preview');
});

传入多个文件打开预览,仅移动端可用。

复制代码
let uiContext = getContext(this);
let fileInfo: filePreview.PreviewInfo = {
  title: '1.txt',
  uri: 'file://docs/storage/Users/currentUser/Documents/1.txt',
  mimeType: 'text/plain'
};
let fileInfo1: filePreview.PreviewInfo = {
  title: '2.txt',
  uri: 'file://docs/storage/Users/currentUser/Documents/2.txt',
  mimeType: 'text/plain'
};
let files: Array<filePreview.PreviewInfo> = new Array();
files.push(fileInfo);
files.push(fileInfo1);
filePreview.openPreview(uiContext, files, 0).then(() => {
  console.info('Succeeded in opening preview');
}).catch((err: BusinessError) => {
  console.error(`Failed to open preview, err.code = ${err.code}, err.message = ${err.message}`);
});

说明:示例代码中使用的uri均为示例作用,开发者实际使用时需要保证uri对应文件存在且拥有该文件的持久化权限。如发生预览失败问题,可参照Preivew Kit的常见问题进行处理。

了解更多详情>>

获取文件预览服务开发指导文档

相关推荐
搜狐技术产品小编202312 小时前
搜狐新闻直播间适配HarmonyOs实现点赞动画
华为·harmonyos
zhanshuo14 小时前
ArkUI 玩转水平滑动视图:超全实战教程与项目应用解析
harmonyos·arkui
zhanshuo14 小时前
ArkUI Canvas 实战:快速绘制柱状图图表组件
harmonyos·arkui
zhanshuo1 天前
手把手教你用 ArkUI 写出高性能分页列表:List + onScroll 实战解析
harmonyos
zhanshuo1 天前
深入解析 ArkUI 触摸事件机制:从点击到滑动的开发全流程
harmonyos
i仙银1 天前
鸿蒙沙箱浏览器 - SandboxFinder
app·harmonyos
Georgewu2 天前
【HarmonyOS】鸿蒙应用开发中常用的三方库介绍和使用示例
harmonyos
AORO20252 天前
遨游三防平板|国产芯片鸿蒙系统单北斗三防平板,安全高效
5g·安全·电脑·制造·信息与通信·harmonyos
HarmonyOS小助手2 天前
“秒开”时代,HarmonyOS预加载让应用启动快如闪电
harmonyos·鸿蒙·鸿蒙生态