更新记录

1.0.7（2026-10-11）

1. 去掉预览文本上面的操作区域

1.0.6（2026-10-10）

1. 组件支持老板本的.doc、.xls等文件格式
2. 修复iOS预览txt时中文编码问题

1.0.5（2026-09-19）

1. 预览ppt背景色改为白色

平台兼容性

uni-app(3.8.5)

uni-app x(3.8.5)

其他

预览pdf、word、excel、ppt、md、txt、视频等文件，支持3端

功能介绍

• 支持预览pdf、word、excel、ppt、md、txt、视频等文件
• 支持本地文件和云端文件
• 支持uniapp、uniapp-x
• 支持自定义UI
• 支持苹果、安卓、鸿蒙

如需预览更多格式的文件，可以使用插件https://ext.dcloud.net.cn/plugin?name=wrs-previewfile

集成步骤

1. 拷贝demo里的AndroidManifest.xml、harmony-configs文件到项目根目录
2. 本页面右上角可以点击"使用HBuilderX导入示例项目"下载demo，导入demo的时候选vue3,插件支持vue2和vue3
3. 插件详细集成步骤可以参考https://www.jianshu.com/p/c1615a7880a7
4. 如需定制或增加功能请点击插件标题下方的"进入交流群"私聊作者

组件

        <!--  #ifdef  APP-HARMONY -->
<embed :style="'width:'+width+'px;height:'+height+'px;'" tag="viewfile" :options="options"
    @onevent="onEvent"></embed>
<!--  #endif -->
<!--  #ifndef  APP-HARMONY -->
<wrs-uts-viewfile ref='videoplayer' :params="params" :style="'width:'+width+'px;height:'+height+'px;'"
    @onLoadView="onLoadView" @onEvent="onEvent"></wrs-uts-viewfile>
<!--  #endif -->

• 水印可以自行添加，一般的水印方案就是在组件上面覆盖一层水印文本

• 使用了该组件的页面需要用nvue或uvue

• 通过修改绑定的属性来切换预览文件

建议将云端文件下载到本地再渲染，方便控制云端文件的下载进度

let url = "http://www.xxxx" // 支持云端文件和本地文件(本地文件传文件的绝对路径,如/xxx/xxx/xxx.pdf)
let params = {}
params.businessArray = [{
    business: "renderFile", // 渲染文件业务
    params: {
        url: url,
        fileType: "pdf", // 文件类型，pdf、md, 可选参数
    }
}]
let paramsStr = JSON.stringify(params)
return {
    fileWebPath: fileWebPath,
    width: windowWidth,
    height: height,
    params: paramsStr,
    options: {
        params: paramsStr
    },
    title: 'Hello'
}

• 事件

onEvent(event) {
    console.log("onEvent:" + JSON.stringify(event))
    let detail = event.detail 
    let opt = detail.opt
    switch (opt){
        case "onRender":
        {
            console.log("渲染成功")
        }
            break;
        case "onError": {
            let msg = detail.msg 
            console.log("渲染失败")
        }
        default:
            break;
    }
},

• 新页面预览文件，目前仅支持鸿蒙的本地文件

let params = {}
params.filePath = "/xxxx/xxx/xxx/test.doc"
params.title = "test.doc"
previewFile(params, (resp) => {
    this.showMsg(JSON.stringify(resp))
})