1 Star 0 Fork 0

silianpan / UniPlugin-Demo

Create your Gitee Account
Explore and code with more than 6 million developers,Free private repositories !:)
Sign up
Clone or download
Cancel
Notice: Creating folder will generate an empty file .keep, because not support in Git
Loading...
README.md

引言

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

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

Seal-OfficeOnline插件下载使用地址

快速上手

demo工程地址 或在右上角直接下载示例工程

开发工具:HBuilderX

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

Step2. 下载本文插件

插件名称:Seal-OfficeOnline

点击右上角试用或者购买,选择你的云打包插件

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

Step4. 使用插件

  • 在vue或nvue组件中,导入插件
var testModule = uni.requireNativePlugin("Seal-OfficeOnline")
  • openFile方法:支持Android和IOS,预览Office文件,支持如下格式:pdf、txt、doc、docx、xls、xlsx、ppt、pptx等
  • OpenFileBS方法:只支持Android,打开在线文档,支持Excel在线编辑,PPT全屏浏览,查看最近打开文件,发送分享文档,采用其他应用打开等
// 平台支持:Android和IOS
// Android支持以下全部参数
// IOS支持:url,title,topBarBgColor,topBarTextColor
testModule.openFile({
	url: 'http://113.62.127.199:8090/fileUpload/1.xlsx', // 同时支持在线和本地文档,三种参数传递方式,具体查看文档说明
	isTopBar: true, // 是否显示顶栏,默认为:true(显示)
	title: 'Office文档在线预览', // 顶栏标题,默认为:APP名称
	topBarHeight: 100, // 顶栏高度,默认为actionBarSize
	topBarBgColor: '#3394EC', // 顶栏背景颜色,默认为:#177cb0(靛青)
	topBarTextColor: '#cf1322', // 顶栏标题文字颜色,默认为:#FFFFFF(白色)
	topBarTextLength: 12, // 顶栏标题文字长度,默认为:12
	isBackArrow: true, // 是否显示返回按钮,默认为:true(显示)
	fileType: 'xlsx', // 可以指定文件类型,如:xlsx,在url参数无法判断文件类型时,可以指定文件类型
	fileName: '1', // 指定文件名,如:file1,注意此处不带文件扩展名,如果同时指定fileName和fileType,那么最后的文件名通过这两个参数组合起来,即:fileName.fileType
	initTitle: '你好,世界', // 初始化插件动画标题,默认:'插件初始化'
	initBody: '怎么了', // 初始化插件动画内容,默认:'加载中...'
	isDeleteFile: true, // 退出是否删除缓存的文件,默认为true(删除缓存文件)
});

// 图片预览,支持jpg、jpeg、png、bmp、jpg、gif等多种常用图片格式
// 图片可以来源于列表或九宫格,传递给imageUrls数组
const url = 'http://113.62.127.199:8090/fileUpload/'
testModule.openFile({
	imageUrls: [ // 图片url数组,此参数优先于文档预览
		url + '1.jpg',
		url + '1.jpeg',
		url + '1.png',
		url + '1.bmp',
		url + '1.gif'
	],
	imageCurrentIndex: 0, // 当前点击图片在imageUrls中的下标,从0开始,默认为0
	imageIndexType: 'number' // 图片底部指示器类型,默认为'dot',可选:'number':数字;'dot':点
})

// 视频播放,支持市面上几乎所有的视频格式,包括mp4, flv, avi, 3gp, webm, ts, ogv, m3u8, asf, wmv, rm, rmvb, mov, mkv等18种视频格式
// 功能包括:全屏播放、锁屏、分享、画面比例调节、左边上下滑动调节亮度,右边上下滑动调节音量等
// 支持Android和IOS
testModule.openFile({
	videoUrl: 'http://113.62.127.199:8090/fileUpload/1.mp4', // 视频在线url,此参数优先于图片预览和文档预览
})

// QQ浏览服务打开在线文档,支持Excel在线编辑,PPT全屏浏览,查看最近打开文件,发送分享文档,采用其他应用打开等
// 平台支持:Android,支持以下全部参数
testModule.openFileBS({
	url: 'http://113.62.127.199:8090/fileUpload/1.xlsx', // 同时支持在线和本地文档,三种参数传递方式,具体查看文档说明
	topBarBgColor: '#3394EC',// 顶栏背景颜色,默认为:#177cb0(靛青)
	fileType: 'xlsx', // 可以指定文件类型,如:xlsx,在url参数无法判断文件类型时,可以指定文件类型
	fileName: '1', // 指定文件名,如:file1,注意此处不带文件扩展名,如果同时指定fileName和fileType,那么最后的文件名通过这两个参数组合起来,即:fileName.fileType
	initTitle: '你好,世界', // 初始化插件动画标题,默认:'插件初始化'
	initBody: '怎么了', // 初始化插件动画内容,默认:'加载中...'
	isDeleteFile: true, // 退出是否删除缓存的文件,默认为true(删除缓存文件)
})

// 获取内核信息,用于调试
const coreInfo = testModule.getX5CoreInfo()
// 返回
{
	'isCoreInited': false, // 内核是否加载
	'coreVersion': 0, // 内核版本
	'sdkVersion': 43967, // sdk版本
}

Step5. 调试

  • 制作自定义调试基座:在开发工具中点击“运行到手机或模拟器-》制作自定义调试基座”
  • 选择自定义调试基座:然后“运行到手机或模拟器-》基座运行选择-》自定义调试基座”
  • 连接真机,运行调试

openFile方法参数说明

支持打开在线文档,本地文档

url

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

  • 文件网络地址,如:http://113.62.127.199:8090/fileUpload/1.xlsx

  • 手机本地文件地址,如:/data/user/0/APP包名/files/1.xlsx

  • 文件名,如:1.xlsx,访问默认目录文件,默认目录为:/data/user/0/APP包名,如:com.HBuilder.UniPlugin

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

isTopBar

isTopBar:是否显示顶栏,默认为:true(显示);显示时,向上滑动顶栏会自动隐藏

title

title:顶栏标题(isTopBar为true时有效),默认为:APP名称

topBarHeight

topBarHeight:顶栏自定义高度(isTopBar为true时有效),类型为正整数,默认为:actionBarSize

topBarBgColor

topBarBgColor:顶栏背景颜色(isTopBar为true时有效),默认为:#177cb0(靛青)

topBarTextColor

topBarTextColor:顶栏文本颜色(isTopBar为true时有效),默认为:#FFFFFF(白色)

topBarTextLength

topBarTextLength:顶栏标题文字长度(isTopBar为true时有效),默认为:12

isBackArrow

isBackArrow:是否显示返回按钮(isTopBar为true时有效),默认为:true(显示)

fileType

fileType:可以指定文件类型,如:xlsx,在url参数无法判断文件类型时,可以指定文件类型

fileName

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

initTitle

initTitle:初始化插件动画标题,默认:'插件初始化'

initBody

initBody:初始化插件动画内容,默认:'加载中...'

isDeleteFile

isDeleteFile:退出是否删除缓存的文件,默认为true(删除缓存文件)

imageUrls

imageUrls:图片url数组,此参数优先于文档预览;长按图片底部弹出保存图片菜单,保存图片至相册

imageCurrentIndex

imageCurrentIndex:当前点击图片在imageUrls中的下标,从0开始,默认为0

imageIndexType

imageIndexType: 图片底部指示器类型,默认为'dot',可选:'number':数字;'dot':点

videoUrl

videoUrl:视频在线url,此参数优先于图片预览和文档预览

事件监听:文件关闭事件SealEventCloseFile,返回文件名和文件路径

注意:isDeleteFile为false时,路径下的文件才存在

onLoad() {
	plus.globalEvent.addEventListener('SealEventCloseFile', function(e) {
		modal.toast({
			// 返回参数{fileName:'xx', filePath:'xx'}
			message: "SealEventCloseFile文件关闭事件:" + JSON.stringify(e),
			duration: 3
		})
	})
},

openFileBS方法参数说明

QQ浏览服务打开在线文档

  • 支持QQ浏览器在线编辑、全屏播放、阅读模式等
  • 支持QQ浏览器打开46种文件格式文件
  • 查看最近打开文件
  • 发送分享文档
  • 采用其他应用打开等

同上,参数支持:url,topBarBgColor,fileType,fileName,initTitle,initBody,isDeleteFile

后续计划

    1. 添加水印
    1. 支持小窗口模式
    1. 支持右上角自定义菜单

Android预览效果

预览docx

预览pptx

预览xlsx

预览pdf

预览txt

iOS预览效果

预览docx

预览pptx

预览xlsx

预览pdf

预览txt

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

Comments ( 0 )

Sign in for post a comment

About

Uni-plugin demo. uni-app原生插件使用案例 spread retract
Cancel

Releases

No release

Contributors

All

Activities

load more
can not load any more
CSS
1
https://gitee.com/twofloor/UniPlugin-Demo.git
git@gitee.com:twofloor/UniPlugin-Demo.git
twofloor
UniPlugin-Demo
UniPlugin-Demo
main

Search