更新记录

1.0.0(2024-03-22)

预览文件 支持pdf/word/excel/ppt 支持本地或在线文件


平台兼容性

Vue2 Vue3
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.7.0,Android:4.4,iOS:9,HarmonyNext:不确定 × × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × × × × × ×

预览文件,支持pdf/word/excel/ppt,支持本地或在线文件

常用文件处理插件

  1. 文件预览https://ext.dcloud.net.cn/plugin?id=17167

    • 支持pdf/word/excel/ppt/图片,支持本地或在线文件
  2. 文件增删查改copy遍历https://ext.dcloud.net.cn/plugin?id=14130

    • 文件读写、copy、move、遍历文件夹、是否存在、删除、重命名......等等
  3. 读取常用文件目录(包含U盘)https://ext.dcloud.net.cn/plugin?id=15243

    • uniapp(_www、_doc、_download)
    • Android(数据目录、文件目录、缓存目录、环境environment目录、SDCard目录、外接U盘)
    • iOS(documentDirectory、temporaryDirectory、libraryDirectory、cachesDirectory)
    • 从U盘读取或保存文件
  4. 读取本地相册图片视频音频https://ext.dcloud.net.cn/plugin?id=15711

    • 获取相册图片、视频、音频文件
    • 常用于自定义相册UI

插件集成步骤可以参考https://www.jianshu.com/p/830ccc503e29

项目配置步骤

  • 拷贝示例demo里的AndroidManifest.xml和nativeResources到项目的根目录
  • 将AndroidManifest.xml里manifest节点的package改成Android打包时的包名

PDF文件预览

  1. android

    • 使用组件预览
    • 打开第三方app来预览
  2. ios

    • 使用组件预览
    • 系统全屏预览

word/excel/ppt/png等等文件预览

  1. android

    • 打开第三方app来预览
  2. ios

    • 使用组件预览
    • 系统全屏预览

组件


        <wrs-uts-previewfile ref='previewfile' @onLoadView="onLoadView" :url="url"
    :style="'width: '+width+'px; height: '+height+'px; background-color: #eeeeee;'"></wrs-uts-previewfile>
  • url 文件路径 本地路径请使用绝对路径,如:/aa/aa/test.pdf 在线路径如:https://xxxxxx/test.pdf
  1. 在Android上可以预览pdf文件,支持在线或本地
  2. 在iOS上可以预览几乎所有文件,包含pdf、word、excel、ppt、图片等等,支持在线或本地pdf

ios系统全屏预览


var url = "/xxx/xxx/test.pdf" // 仅支持本地文件,本地文件请使用绝对路径,在线文档请使用<wrs-uts-previewfile />组件预览
var urls = []
urls.push(url)
var params = {}
params.urls = urls
// params.currentPreviewItemIndex = 0 // 从第几个开始预览
UTSPreviewFile.previewFile(params, (resp) => {
    console.log("resp: " + JSON.stringify(resp))
})

android打开第三方app来预览


var params = {}
params.filePath = path // 支持本地绝对地址和在线地址
// params.authority = "uni.UNI0BFBE8C"
params.authority = "uni.UNI0BFBE8C" //Android包名
// params.flags = [
//  0x10000000, // FLAG_ACTIVITY_NEW_TASK
//  0x04000000, // FLAG_ACTIVITY_CLEAR_TOP
//  0x00000001, // FLAG_GRANT_READ_URI_PERMISSION
//  0x00000002, // FLAG_GRANT_WRITE_URI_PERMISSION
//  ]
console.log("previewFileWithOtherApp")
UTSPreviewFile.previewFileWithOtherApp(params, (resp) => {
    console.log("resp: " + JSON.stringify(resp))
})

隐私、权限声明

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

读写

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

插件不采集任何数据

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

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