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

引言

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

• 跨平台（uni-app）文件在线预览解决方案
• 跨平台文件在线预览解决方案（二）
• 跨平台文件在线预览解决方案（三）- LibreOffice vs OpenOffice

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

Seal-OfficeOnline插件下载使用地址

快速上手

demo工程地址

开发工具：HBuilderX

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

Step2. 下载本文插件

插件名称：Seal-OfficeOnline

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

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

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

预览pptx

预览xlsx

预览pdf

预览txt

iOS预览效果

预览docx

预览pptx

预览xlsx

预览pdf

预览txt

转载请注明：我的技术分享 » 跨平台文件在线预览解决方案（四）-Android和IOS原生插件