更新记录

1.4.3(2021-02-22)

Android文档预览openFile方法

  • 修复图片预览,横竖屏切换应用崩溃问题

1.4.2(2021-02-02)

修复上架华为商店问题

查看更多

平台兼容性

Android iOS
适用版本区间:5.1 - 11.0 支持CPU类型:armeabi-v7a,arm64-v8a,x86 适用版本区间:9 - 14

原生插件通用使用流程:

  1. 购买插件,选择该插件绑定的项目。
  2. 在HBuilderX里找到项目,在manifest的app原生插件配置中勾选模块,如需要填写参数则参考插件作者的文档添加。
  3. 根据插件作者的提供的文档开发代码,在代码中引用插件,调用插件功能。
  4. 打包自定义基座,选择插件,得到自定义基座,然后运行时选择自定义基座,进行log输出测试。
  5. 开发完毕后正式云打包

付费原生插件目前不支持离线打包。
Android 离线打包原生插件另见文档 https://nativesupport.dcloud.net.cn/NativePlugin/offline_package/android
iOS 离线打包原生插件另见文档 https://nativesupport.dcloud.net.cn/NativePlugin/offline_package/ios

注意事项:使用HBuilderX2.7.14以下版本,如果同一插件且同一appid下购买并绑定了多个包名,提交云打包界面提示包名绑定不一致时,需要在HBuilderX项目中manifest.json->“App原生插件配置”->”云端插件“列表中删除该插件重新选择


注意事项

  • manifest.json->App模块配置不要勾选Android X5 Webview

  • 不要同时使用其他任何预览插件,否则,会引起打包冲突

  • 如遇预览失败,(1)把APP卸载,重新打基座运行,第一次运行会自动安装X5插件;(2)或者换手机(华为或小米)进行测试

快速上手

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
// 方式一:直接在openFile接口中传递在线url
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(删除缓存文件)
});
// 方式二:先调用uni-app接口uni.downloadFile下载文件,然后获取本地文件绝对路径,传递到openFile接口url参数中
openOnlineFile2(fileName) {
    // 调用uni.downloadFile接口下载文件
    uni.downloadFile({
        url: 'http://113.62.127.199:8090/fileUpload/' + fileName,
        success: (res) => {
            if (res.statusCode === 200) {
                // 传递本地文件绝对路径,res.tempFilePath的前缀是_doc,而实际目录为doc,没有下划线_,所以要substr取子串
                // const url = '/sdcard/Android/data/APP包名/apps/APPID/' + res.tempFilePath.substr(1)
                // 可以通过一下方式获取文件绝对路径
                uni.saveFile({
                    // 需要保存文件的临时路径
                    tempFilePath: res.tempFilePath,
                    success: (resSave) => {
                        const savedFilePath = resSave.savedFilePath
                        // 转换为绝对路径
                        const url = plus.io.convertLocalFileSystemURL(savedFilePath)
                        // 预览本地文件
                        testModule.openFile({
                            url: url,
                        });
                    }
                });
            }
        }
    });
},

// 图片预览,支持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原生插件

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问