一、Preview Kit

1.1 核心能力

1.2 文件预览特点

• 支持选中多文件，在预览列表切换显示

• 支持文件分享

• 支持“使用其他应用打开”跳转到具体应用

• 图片支持旋转、放大等操作（非2in1设备）

注意：Office文档预览借助WPS能力实现，预览界面会有WPS提供的技术支持。

二、限制

三、支持的文件类型

注意：实际支持情况可采用canPreview接口判断。

四、核心接口

五、开发步骤

5.1 导入模块

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

5.2 判断是否可以预览

let uri = 'file://docs/storage/Users/currentUser/Documents/1.txt';
let uiContext = this.getUIContext().getHostContext() as common.Context;

filePreview.canPreview(uiContext, uri).then((result) => {
  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, err.code = ${err.code}, err.message = ${err.message}`);
});

5.3 打开文件预览（单文件）

Promise方式：

let uiContext = this.getUIContext().getHostContext() as common.Context;

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方式：

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

5.4 打开文件预览（多文件，仅移动端）

let uiContext = this.getUIContext().getHostContext() as common.Context;

let fileInfo1: filePreview.PreviewInfo = {
  title: '1.txt',
  uri: 'file://docs/storage/Users/currentUser/Documents/1.txt',
  mimeType: 'text/plain'
};
let fileInfo2: filePreview.PreviewInfo = {
  title: '2.txt',
  uri: 'file://docs/storage/Users/currentUser/Documents/2.txt',
  mimeType: 'text/plain'
};

let files: Array<filePreview.PreviewInfo> = [fileInfo1, fileInfo2];

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

5.5 加载新文件（预览窗口已存在时）

let uiContext = this.getUIContext().getHostContext() as common.Context;

let fileInfo: filePreview.PreviewInfo = {
  title: '2.txt',
  uri: 'file://docs/storage/Users/currentUser/Documents/2.txt',
  mimeType: 'text/plain'
};

filePreview.loadData(uiContext, fileInfo).then(() => {
  console.info('Succeeded in loading data.');
}).catch((err: BusinessError) => {
  console.error(`Failed to load data, err.code = ${err.code}, err.message = ${err.message}`);
});

5.6 关闭预览窗口

let uiContext = this.getUIContext().getHostContext() as common.Context;

filePreview.closePreview(uiContext).then(() => {
  console.info('Succeeded in closing preview');
}).catch((err: BusinessError) => {
  console.error(`Failed to close preview, err.code = ${err.code}, err.message = ${err.message}`);
});

六、注意事项