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

随着移动设备处理文档的需求日益增加，传统的文件处理方式需要用户将文件下载到本地，再通过相应的软件打开，这种方式不仅效率低，而且需要安装多种软件以兼容不同文件格式，用户期望能够在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';
2. import { BusinessError } from '@kit.BasicServicesKit';

复制代码

• 判断是否可以预览。
  

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

复制代码

• 调用openPreview，实现打开文件预览的功能。
  

通过Promise方式打开文件

1. let uiContext = getContext(this);
2. let displayInfo: filePreview.DisplayInfo = {
3.   x: 100,
4.   y: 100,
5.   width: 800,
6.   height: 800
7. };
8. let fileInfo: filePreview.PreviewInfo = {
9.   title: '1.txt',
10.   uri: 'file://docs/storage/Users/currentUser/Documents/1.txt',
11.   mimeType: 'text/plain'
12. };
13. filePreview.openPreview(uiContext, fileInfo, displayInfo).then(() => {
14.   console.info('Succeeded in opening preview');
15. }).catch((err: BusinessError) => {
16.   console.error(`Failed to open preview, err.code = ${err.code}, err.message = ${err.message}`);
17. });

复制代码

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

1. let uiContext = getContext(this);
2. let displayInfo: filePreview.DisplayInfo = {
3.   x: 100,
4.   y: 100,
5.   width: 800,
6.   height: 800
7. };
8. let fileInfo: filePreview.PreviewInfo = {
9.   title: '1.txt',
10.   uri: 'file://docs/storage/Users/currentUser/Documents/1.txt',
11.   mimeType: 'text/plain'
12. };
13. filePreview.openPreview(uiContext, fileInfo, displayInfo, (err) => {
14.   if (err && err.code) {
15.     console.error(`Failed to open preview, err.code = ${err.code}, err.message = ${err.message}`);   
16.     return;
17.   }
18.   console.info('Succeeded in opening preview');
19. });

复制代码

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

1. let uiContext = getContext(this);
2. let fileInfo: filePreview.PreviewInfo = {
3.   title: '1.txt',
4.   uri: 'file://docs/storage/Users/currentUser/Documents/1.txt',
5.   mimeType: 'text/plain'
6. };
7. let fileInfo1: filePreview.PreviewInfo = {
8.   title: '2.txt',
9.   uri: 'file://docs/storage/Users/currentUser/Documents/2.txt',
10.   mimeType: 'text/plain'
11. };
12. let files: Array<filePreview.PreviewInfo> = new Array();
13. files.push(fileInfo);
14. files.push(fileInfo1);
15. filePreview.openPreview(uiContext, files, 0).then(() => {
16.   console.info('Succeeded in opening preview');
17. }).catch((err: BusinessError) => {
18.   console.error(`Failed to open preview, err.code = ${err.code}, err.message = ${err.message}`);
19. });

复制代码

说明：示例代码中使用的uri均为示例作用，开发者实际使用时需要保证uri对应文件存在且拥有该文件的持久化权限。如发生预览失败问题，可参照Preivew Kit的常见问题进行处理。
了解更多详情>>
获取文件预览服务开发指导文档

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！