跨平台文件在线预览解决方案（四）-Android和IOS原生插件

旧城等待， 2022-12-15 14:04 586阅读 0赞

## 引言 ##

前面写了多篇关于<跨平台文件在线预览解决方案>，不管使用pdf.js、LibreOffice，还是永中DCS，各自都有自己的优缺点，比如：pdf.js不支持双指放大缩小，LibreOffice加载缓慢，永中DCS收费等等。

*  [跨平台（uni-app）文件在线预览解决方案][uni-app]
 *  [跨平台文件在线预览解决方案（二）][Link 1]
 *  [跨平台文件在线预览解决方案（三）- LibreOffice vs OpenOffice][- LibreOffice vs OpenOffice]

本文基于[uni-app][uni-app 1]平台实现了[Office文档在线预览原生插件Seal-OfficeOnline][Office_Seal-OfficeOnline]，同时支持Android和iOS，欢迎下载使用~

[Seal-OfficeOnline插件下载使用地址][Office_Seal-OfficeOnline]

![ea8e8d50-1024-11eb-81ea-f115fe74321c.gif][] ![38c046f0-102d-11eb-b244-a9f5e5565f30.gif][]

## 快速上手 ##

[demo工程地址][demo]

开发工具：[HBuilderX][]

### Step1. 下载demo工程，使用HBuilderX打开 ###

### Step2. 下载本文插件 ###

插件名称：[Seal-OfficeOnline][Office_Seal-OfficeOnline]

下载插件解压放置到项目根目录`nativeplugins`下，如图：

![8c698370-102d-11eb-9dfb-6da8e309e0d8.png][]

### Step3. 选择`manifest.json->App原生插件配置`中加载本地插件 ###

![da031560-102d-11eb-b680-7980c8a877b8.png][]

### Step4. 使用插件 ###

*  在vue或nvue组件中，导入插件

var testModule = uni.requireNativePlugin("Seal-OfficeOnline")

*  使用openFile方法预览Office文件，支持如下格式：pdf、txt、doc、docx、xls、xlsx、ppt、pptx

testModule.openFile({ 
    	url: 'http://113.62.127.199:8090/fileUpload/1.xlsx',
    	topBarBgColor: '#3394EC',
    	topBarTextColor: '#FFFFFF',
    	title: 'Office文档在线预览',
    	isBackArrow: false,
    	fileType: 'xlsx',
    	fileName: '1'
    });

## openFile方法参数说明 ##

### url ###

url参数支持如下三种地址方式：

*  文件网络地址，如：http://113.62.127.199:8090/fileUpload/1.xlsx
 *  手机本地文件地址，如：/data/user/0/com.HBuilder.UniPlugin/files/1.xlsx
 *  文件名，如：1.xlsx，访问默认目录文件，默认目录为：/data/user/0/com.HBuilder.UniPlugin

**注意**：手机本地地址目录需要有权限访问

### title ###

title表示顶栏文本，默认为：SealOfficeOnline

### topBarBgColor ###

topBarBgColor表示顶栏背景颜色，默认为：\#177cb0（靛青）

### topBarTextColor ###

topBarTextColor表示顶栏文本颜色，默认为：\#FFFFFF（白色）

### isBackArrow ###

isBackArrow表示是否显示返回按钮，默认为：true（显示）

### fileType ###

fileType表示可以指定文件类型，如：xlsx，在url参数无法判断文件类型时，可以指定文件类型

### fileName ###

fileName可以指定文件名，如：file1，注意此处不带文件扩展名，如果同时指定fileName和fileType，那么最后的文件名通过这两个参数组合起来，即：fileName.fileType

## Android预览效果 ##

### 预览docx ###

![9dec53b0-1024-11eb-b244-a9f5e5565f30.jpg][]

### 预览pptx ###

![a8316a90-1024-11eb-8bd0-2998ac5bbf7e.jpg][]

### 预览xlsx ###

![b302bbe0-1024-11eb-8ff1-d5dcf8779628.jpg][]

### 预览pdf ###

![baaae0c0-1024-11eb-9dfb-6da8e309e0d8.jpg][]

### 预览txt ###

![c0676240-1024-11eb-81ea-f115fe74321c.jpg][]

## iOS预览效果 ##

### 预览docx ###

![c590cb80-1024-11eb-8ff1-d5dcf8779628.jpg][]

### 预览pptx ###

![cab1d050-1024-11eb-8a36-ebb87efcf8c0.jpg][]

### 预览xlsx ###

![cff6d7e0-1024-11eb-b680-7980c8a877b8.jpg][]

### 预览pdf ###

![dd023ab0-1024-11eb-b997-9918a5dda011.jpg][]

### 预览txt ###

![e28eab80-1024-11eb-8a36-ebb87efcf8c0.jpg][]

[uni-app]: http://silianpan.cn/index.php/2019/10/25/uniapp_file_online_preview/
[Link 1]: http://silianpan.cn/index.php/2020/08/21/online_file_preview_2/
[- LibreOffice vs OpenOffice]: http://silianpan.cn/index.php/2020/09/09/file_preview_libreoffice/
[uni-app 1]: https://uniapp.dcloud.io/
[Office_Seal-OfficeOnline]: https://ext.dcloud.net.cn/plugin?id=3226
[ea8e8d50-1024-11eb-81ea-f115fe74321c.gif]: https://vkceyugu.cdn.bspapp.com/VKCEYUGU-aliyun-lau3cirf3bhq53ac04/ea8e8d50-1024-11eb-81ea-f115fe74321c.gif
[38c046f0-102d-11eb-b244-a9f5e5565f30.gif]: /images/20221123/00f44b2edb3744ab9fd1dbdb383262ac.png
[demo]: https://github.com/silianpan/UniPlugin-Demo
[HBuilderX]: https://www.dcloud.io/hbuilderx.html
[8c698370-102d-11eb-9dfb-6da8e309e0d8.png]: /images/20221123/943a57b5b9b344af8045ac5f1bce46c8.png
[da031560-102d-11eb-b680-7980c8a877b8.png]: https://vkceyugu.cdn.bspapp.com/VKCEYUGU-aliyun-lau3cirf3bhq53ac04/da031560-102d-11eb-b680-7980c8a877b8.png
[9dec53b0-1024-11eb-b244-a9f5e5565f30.jpg]: /images/20221123/fc5eebfe8ba245a6a125c1daefd7d6b0.png
[a8316a90-1024-11eb-8bd0-2998ac5bbf7e.jpg]: /images/20221123/4f09bef3294249d8a96f30317be169c6.png
[b302bbe0-1024-11eb-8ff1-d5dcf8779628.jpg]: /images/20221123/f8f8688211ad47ceb636f1049695f753.png
[baaae0c0-1024-11eb-9dfb-6da8e309e0d8.jpg]: /images/20221123/b955ca4524d94ffc879ad1621f4ae5f1.png
[c0676240-1024-11eb-81ea-f115fe74321c.jpg]: /images/20221123/79b40a86ec2c4e8caccf8945442023fe.png
[c590cb80-1024-11eb-8ff1-d5dcf8779628.jpg]: /images/20221123/1a1dbfa3eadd4434aa941fc4bf48ac0a.png
[cab1d050-1024-11eb-8a36-ebb87efcf8c0.jpg]: /images/20221123/e4b9c44f4cfe439ca0623a2f1957ef09.png
[cff6d7e0-1024-11eb-b680-7980c8a877b8.jpg]: /images/20221123/757a8d3ee5cf4cb0857127c913c61992.png
[dd023ab0-1024-11eb-b997-9918a5dda011.jpg]: /images/20221123/3894127081384991b547eebc3fd2cbcc.png
[e28eab80-1024-11eb-8a36-ebb87efcf8c0.jpg]: /images/20221123/6e0f01ef61b44b229704cc65a72f4dcf.png