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

随着移动设备处理文档的需求日益增加，传统的文件处理方式需要用户将文件下载到本地，再通过相应的软件打开，这种方式不仅效率低，而且需要安装多种软件以兼容不同文件格式，用户期望能够在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以及文件夹进行查看，具体类型如下：

开发步骤

导入相关模块。

import { filePreview } from '@kit.PreviewKit';
import { BusinessError } from '@kit.BasicServicesKit';
判断是否可以预览。

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});
});
调用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的常见问题进行处理。

了解更多详情>>

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