实现文件快速预览

​最近公司有一个需求：老板希望能够快速在应用中查看各种类型的文件📄🖼️🎶🎥，

比如文本、图片、音频、视频，甚至是网页和文档，而不需要每次跳转到系统的其他应用。
这时，我们就需要为应用集成一个文件快速预览的功能。

为了解决这个问题，我们选择了 @kit.PreviewKit 模块，它提供了系统级的文件快速预览 API，只需几行代码就能实现预览功能。它的主要优势在于简单易用，几乎不需要复杂配置就可以支持多种文件类型，大大提高了开发效率💡。

📂 支持的文件类型
PreviewKit支持多种文件类型的预览，涵盖了常见的文本、图片、音频、视频等。具体支持的文件后缀和对应的 MIME 类型如下：

文本: txt、cpp、java 等
网页: html、htm
图片: jpg、png、gif 等
音频: mp3、wav 等
视频: mp4、mkv 等
文档: pdf

这些文件类型涵盖了企业日常中的大部分需求，无论是查看技术文档、项目计划，还是播放培训视频、会议录音，都可以通过 PreviewKit 轻松实现。此外，PreviewKit 的扩展性也非常好，未来如果需要支持更多文件类型，可以方便地进行升级和调整。

💻 开始编码实现文件预览
接下来我们直接进入编码实现部分，看看如何通过代码使用 PreviewKit 来实现文件预览。
首先，我们需要导入模块：

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

比如有这么一个场景，用户想要查看一份文本文件 1.txt ，它位于应用的 Documents 文件夹下。我们可以通过调用 openPreview 方法来打开文件预览窗口。

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

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

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}`);

});

📝 代码讲解
1.上下文环境获取:

let uiContext = getContext(this);
用于获取当前 UI 的上下文环境。这是必需的，有了上下文环境，文件预览窗口才能正确地显示。

2.悬浮窗口的显示信息:

DisplayInfo 包含悬浮窗口的位置和大小。可以通过 x 和 y 控制窗口在屏幕上的位置，通过 width 和 height 控制窗口大小📏。这使得我们能够灵活地调整预览窗口的展示效果，确保它符合用户的使用习惯。

3.文件信息配置:

PreviewInfo 定义了要预览的文件信息，包括文件名、URI 和 MIME 类型。如果 title 没有填写，系统会尝试通过 uri 解析文件名。如果无法解析，则显示为“未知文件”，因此建议填写 title 以提升用户体验。

4.调用openPreview方法:

通过 filePreview.openPreview()，传入上下文、文件信息和窗口信息，即可异步打开文件预览窗口。使用 Promise 可以方便地处理成功和失败的回调，从而确保应用在处理预览请求时更加稳定，提升用户交互体验📈。

⚠️ 错误处理

当然调用文件预览接口时，非常有可能会遇到一些问题，例如参数错误或文件无法访问等。这时需要通过 catch方法捕获错误并进行处理，常见的错误码包括：

• 401: 输入参数无效，可能是 URI 错误或 MIME 类型不正确。在这种情况下，需要检查传入的参数，确保信息准确无误。
• 801: 功能不支持，可能是设备不支持对应文件类型的预览。这类错误通常与设备的限制有关，可以考虑提供备用的处理方式，例如提示用户文件类型不支持。
  进行错误处理，我们可以提高应用的健壮性💪，即使遇到各种边界情况，也能够为用户提供清晰的错误提示和引导，减少用户的困惑。

📑 多文件预览

有时用户可能需要一次预览多个文件，比如查看项目中的多个文档📂。在这种情况下，可以使用 openPreview(context, files, index) 方法，允许用户在一个窗口中预览多个文件，从而提高文件管理的效率。

let files: Array<filePreview.PreviewInfo> = [

  {

    title: '1.txt',

    uri: 'file://docs/storage/Users/currentUser/Documents/1.txt',

    mimeType: 'text/plain'

  },

  {

    title: 'report.pdf',

    uri: 'file://docs/storage/Users/currentUser/Documents/report.pdf',

    mimeType: 'application/pdf'

  }

];

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}`);

});

上面的代码中，我们传入了多个文件信息，并指定 index = 0 ，即默认打开第一个文件的预览窗口。这样，用户可以在多个文件之间进行切换，非常方便。

这种多文件预览的功能特别适用于需要同时查看多个文件的场景，比如审核项目资料、查看多份报告等，极大提升了用户的工作效率🚀。

📌 最后小总结

通过 @kit.PreviewKit，我们可以轻松为应用集成文件快速预览功能，支持文本📄、图片🖼️、音频🎶、视频🎥等多种文件类型。无论是单个文件的预览，还是多个文件之间的切换，都可以通过简单的 API 实现，为用户提供流畅而高效的文件查看体验。

总之又解决了一个老板问题 ～安全下车～！