随着移动设备处理文档的需求日益增加，传统的文件处理方式需要用户将文件下载到本地，再通过相应的软件打开，这种方式不仅效率低，而且需要安装多种软件以兼容不同文件格式，用户期望能够在 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 的常见问题进行处理。
了解更多详情>>
获取文件预览服务开发指导文档
评论