更新记录
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,支持本地或在线文件
常用文件处理插件
-
文件预览https://ext.dcloud.net.cn/plugin?id=17167
- 支持pdf/word/excel/ppt/图片,支持本地或在线文件
-
文件增删查改copy遍历https://ext.dcloud.net.cn/plugin?id=14130
- 文件读写、copy、move、遍历文件夹、是否存在、删除、重命名......等等
-
读取常用文件目录(包含U盘)https://ext.dcloud.net.cn/plugin?id=15243
- uniapp(_www、_doc、_download)
- Android(数据目录、文件目录、缓存目录、环境environment目录、SDCard目录、外接U盘)
- iOS(documentDirectory、temporaryDirectory、libraryDirectory、cachesDirectory)
- 从U盘读取或保存文件
-
读取本地相册图片视频音频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文件预览
-
android
- 使用
组件预览 - 打开第三方app来预览
- 使用
-
ios
- 使用
组件预览 - 系统全屏预览
- 使用
word/excel/ppt/png等等文件预览
-
android
- 打开第三方app来预览
-
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
- 在Android上可以预览pdf文件,支持在线或本地
- 在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))
})