APP 中常有需求就是点击文件打开预览。

鸿蒙中，可以借助访问的预览文件服务来实现。

测试下来，常见的文档类型txt, doc, excel, ppt,pdf, 图片，视频等都是默认可以打开的。遇到不能打开的，界面也会按钮是否使用其他 APP 来打开。

支持的文件类型

官方文档列出的支持类型，实际测试下来，除了下面的列表，对doc, ppt, excel, pdf等文件都是直接支持的（没有安装过wps）。

遇到不支持的文件类型也没有关系，在预览不了的时候，界面有一个使用其他其他应用，或者保存本地的功能。

代码实现

将一个本地的文件，使用预览服务预览。注意这里的文件，必须是当前应用有权限获取的文件，无论是用户选择的文件，或者是 APP 下载的文件保存在 APP 本身的缓存目录中的。至于如何下载文件，是另一个篇幅的事情。本章节的是一个已经存在的本地文件。

预览文件的代码

// 本地真是存在的文件
const filePath = ""

// 需要将文件转换成文件uri
const uri = fileUri.getUriFromPath(filePath)
// 当前文件是否支持预览。这一步可以省略。看个人需求，就算不支持也是可以打开预览界面的。
// 但是这里要注意的是确保文件路径一定要存在。如果上面的文件不存在，isCan也是false的
const isCan = await filePreview.canPreview(this.context.uiAbilityContext, uri)

if(!isCan) {
	// todo: 不支持如何处理
}
// 根据文件的名称获取文件的MIMEType，方法实现见下文章节
const mimeType = getMimeTypeByFileName(fileName)

let fileInfo: filePreview.PreviewInfo = {
		title: fileName,
		uri: uri,
		mimeType: mimeType
};

const uiAbilityContext = getContext(this);

filePreview.openPreview(uiAbilityContext, fileInfo).catch((err: BusinessError) => {
		this.alert({ message: `文件: ${fileName}, 无法预览，原因: ${err.message}` })
});

根据真实文件地址获取文件uri

文件uri是鸿蒙特色的为了隐藏真是文件地址设计的。一般遇到文件处理的时候，可以都会遇到文件地址和文件uri互相转换的过程。可以参考《【鸿蒙官方文档】用户文件uri介绍》

根据文件的后缀名获取MIMEType

因为文件预览服务是需要知道MIMEType的，官方提供了《如何通过文件后缀获取对应的MIMEType列表》，我们只需要获取后缀名，再调用官方 API 即可：

export function getExtension(filename: string, includeDot = false): string {
    const dot = '.'
    if (filename.lastIndexOf(dot) == -1) {
        return ""
    }

    const ext = filename.split(dot).pop()
    return includeDot ? "." + ext : ext
}


export function getMimeTypeByFileName(name: string) {
    const ext = getExtension(name)
    return getMimeTypeByExtension(ext)
}

export function getMimeTypeByExtension(ext: string) {
    if (!ext.startsWith(".")) {
        ext = "." + ext
    }
    let typeId = uniformTypeDescriptor.getUniformDataTypeByFilenameExtension(ext);
    let typeObj = uniformTypeDescriptor.getTypeDescriptor(typeId);
    let mimeTypes = typeObj.mimeTypes;

    return mimeTypes[0]
}

预览效果图

PDF

图片

无法预览的文件

参考

1. 《【鸿蒙官方文档】文件预览》
2. 《【鸿蒙官方文档】预览服务 - API》
3. 《【鸿蒙官方文档】用户文件uri介绍》
4. 《【鸿蒙官方文档】标准化数据类型》