• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

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

互联网 diligentman 1周前 (10-17) 9次浏览

引言

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

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

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

Seal-OfficeOnline插件下载使用地址

<div class=”half”>

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

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

</div>

快速上手

demo工程地址

开发工具:HBuilderX

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

Step2. 下载本文插件

插件名称:Seal-OfficeOnline

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

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

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

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

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

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

预览pptx

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

预览xlsx

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

预览pdf

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

预览txt

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

iOS预览效果

预览docx

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

预览pptx

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

预览xlsx

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

预览pdf

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

预览txt

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

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


喜欢 (0)