跨平台OFD、PDF文档预览UTS插件

〇、介绍

Seal-OfdReader是跨平台OFD文档预览原生插件,具有以下特点:

  • 支持UniApp项目集成,也支持原生Android项目集成

  • 非腾讯X5,无内核加载,高效率、稳定高可用

  • 支持在线文档,也支持离线设备本地文档

  • 支持Android和IOS

  • 支持全屏预览,也支持组件嵌入方式预览

  • 支持顶部状态栏自定义菜单功能按钮

  • 支持水印防截屏自定义状态栏自定义菜单功能按钮等诸多可选配置

  • 支持国产OFD以及PDF文档格式

作者其他插件,欢迎使用:

1、文档预览原生Android项目离线集成,Demo工程及README文档地址: Seal-Office-Android-Demo
2、跨平台Office文档预览原生插件【非X5离线、组件嵌入、水印、WPS预览编辑】,插件地址:Seal-OfficeOnline
3、跨平台系统接口:获取静音模式、免打扰状态、音量等UTS插件,插件地址:seal-system-api-uts
4、Android和IOS图片预览,音视频播放原生插件【非腾讯X5,无内核加载】,插件地址:Seal-ImageVideo
5、跨平台Android和IOS百度OCR文字识别、证卡识别、票据识别原生插件,插件地址:Seal-OCR
6、跨平台Android和IOS百度语音在线识别原生插件,插件地址:Seal-VoiceASR

各位同学,对于插件使用还有疑问的,可以加QQ群(170683293)咨询,也可以扫下面二维码添加WX或者添加QQ(2480621579)。

一、快速上手

插件名称:seal-ofd-reader-api-uts

Step1. 点击右上角【使用HBuilderX导入示例项目】

Step2. 打开manifest.json文件,重新获取AppID

Step3. 制作自定义调试基座

点击"运行-》运行到手机或模拟器-》制作自定义调试基座"

Step4. 运行调试

连接真机,点击"运行-》运行到手机或模拟器-》运行到Android App(或iOS App)基座-》选择'使用自定义基座运行'"

二、插件接口

  • openFile方法:支持Android和IOS,预览OFD、PDF格式文档,IOS端不支持PDF。

三、使用方法

openFIle文档预览(离线、在线)

参数参考章节《三、openFile接口参数说明》

支持平台:Android、IOS

支持OFD,PDF,注意:IOS不支持PDF

index.uvue

javascript 复制代码
uni.showLoading({
  title: '正在下载文件,请稍后~'
});
uni.downloadFile({
  url: 'http://silianpan.cn/upload/2022/01/01/1.ofd',
  success: res => {
    if (res.statusCode === 200) {
      // 直接传递本地文件地址
      // 传递本地文件绝对路径,res.tempFilePath的前缀是_doc,而实际目录为doc,没有下划线_,所以要substr取子串
      // const url = '/storage/sdcard0/Android/data/APP包名/apps/APPID/' + res.tempFilePath.substr(1)
      // 可以通过以下方式获取文件绝对路径
      uni.saveFile({
        // 需要保存文件的临时路径
        tempFilePath: res.tempFilePath,
        success: resSave => {
          uni.hideLoading();
          const savedFilePath = resSave.savedFilePath;
          // 转换为绝对路径
          const fileLocalPath = plus.io.convertLocalFileSystemURL(savedFilePath);
          console.log('tempFilePath', res.tempFilePath);
          console.log('savedFilePath', savedFilePath);
          console.log('fileLocalPath', fileLocalPath);
          // 预览本地文件
          openFile({
            filePath: fileLocalPath,
            title: 'OFD/PDF文档在线预览',
            topBarBgColor: '#3394EC',
            waterMarkText: '你好,世界\n准备好了吗?时刻准备着',
          } as OpenFileParams)
        }
      });
    }
  }
});

index.vue

js 复制代码
uni.showLoading({
  title: '正在下载文件,请稍后~'
});
uni.downloadFile({
  url: 'http://silianpan.cn/upload/2022/01/01/1.ofd',
  success: res => {
    if (res.statusCode === 200) {
      // 直接传递本地文件地址
      // 传递本地文件绝对路径,res.tempFilePath的前缀是_doc,而实际目录为doc,没有下划线_,所以要substr取子串
      // const url = '/storage/sdcard0/Android/data/APP包名/apps/APPID/' + res.tempFilePath.substr(1)
      // 可以通过以下方式获取文件绝对路径
      uni.saveFile({
        // 需要保存文件的临时路径
        tempFilePath: res.tempFilePath,
        success: resSave => {
          uni.hideLoading();
          const savedFilePath = resSave.savedFilePath;
          // 转换为绝对路径
          const fileLocalPath = plus.io.convertLocalFileSystemURL(savedFilePath);
          console.log('tempFilePath', res.tempFilePath);
          console.log('savedFilePath', savedFilePath);
          console.log('fileLocalPath', fileLocalPath);
          // 预览本地文件
          openFile({
            filePath: fileLocalPath,
            title: 'OFD/PDF文档在线预览',
            topBarBgColor: '#3394EC',
            waterMarkText: '你好,世界\n准备好了吗?时刻准备着',
          })
        }
      });
    }
  }
});

四、openFile接口参数说明

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

支持平台:Android、IOS

参数名 说明 类型 是否必填 默认值 可选值
filePath 本地文件路径,如:/data/user/0/APP包名/files/1.ofd string
docDownloadTitle 文档加载进度框标题,IOS端无此配置 string 加载文档
waterMarkText 水印文本,默认以**\n**作为分隔符换行 string null
waterMarkTextSep 水印文本分隔符,注意:IOS端只支持\n换行 string \n
waterMarkFontSize 水印字体大小,单位为sp 使用sp作为字体大小单位,会随着系统的字体大小改变 int 13
waterMarkFontColor 水印字体颜色 string #40F3F5F9
waterMarkDegree 水印旋转角度,IOS端无此配置 string -30(逆时针30度)
isTopBar 是否显示顶栏,IOS端无此配置 bool true false
title 顶栏标题,isTopBar为true时有效 string APP名称
topBarHeight 顶栏自定义高度,isTopBar为true时有效,类型为正整数,IOS端无此配置 int actionBarSize
topBarBgColor 顶栏背景颜色,isTopBar为true时有效 string #3394EC(科技蓝)
topBarTextColor 顶栏文本颜色(isTopBar为true时有效) string #FFFFFF(白色)
topBarTextLength 顶栏标题文字长度(isTopBar为true时有效),IOS端无此配置 int 12
isBackArrow 是否显示返回按钮(isTopBar为true时有效),IOS端无此配置 bool true false

五、预览效果

Android

  • 预览ofd

  • 嵌入预览

  • 预览pdf

IOS

  • 预览ofd

  • 嵌入预览

相关推荐
join81 小时前
解决vue-pdf的签章不显示问题
javascript·vue.js·pdf
小行星1251 小时前
前端把dom页面转为pdf文件下载和弹窗预览
前端·javascript·vue.js·pdf
Dnelic-2 小时前
【单元测试】【Android】JUnit 4 和 JUnit 5 的差异记录
android·junit·单元测试·android studio·自学笔记
Eastsea.Chen4 小时前
MTK Android12 user版本MtkLogger
android·framework
比格丽巴格丽抱11 小时前
flutter项目苹果编译运行打包上线
flutter·ios
长亭外的少年12 小时前
Kotlin 编译失败问题及解决方案:从守护进程到 Gradle 配置
android·开发语言·kotlin
网络安全-老纪12 小时前
iOS应用网络安全之HTTPS
web安全·ios·https
建群新人小猿14 小时前
会员等级经验问题
android·开发语言·前端·javascript·php
1024小神15 小时前
tauri2.0版本开发苹果ios和安卓android应用,环境搭建和最后编译为apk
android·ios·tauri
兰琛15 小时前
20241121 android中树结构列表(使用recyclerView实现)
android·gitee