更新记录

1.0.0（2026-09-13） 下载此版本

预览pdf、word、excel、ppt、md、txt等文件，支持所有端

平台兼容性

uni-app(3.8.3)

uni-app x(3.8.3)

其他

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

功能介绍

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

预览文件服务部署

服务目前采用docker部署方式

docker pull crpi-ygoqfjyoj0tr8m85.cn-guangzhou.personal.cr.aliyuncs.com/wrsspace/previewfile:1.0.2
docker run --name previewfile --restart always -itd -p 8848:8848 --name previewfile crpi-ygoqfjyoj0tr8m85.cn-guangzhou.personal.cr.aliyuncs.com/wrsspace/previewfile:1.0.2

服务器启动后，将common/url_help.js代码里的host地址改为这里的地址let host = "http://192.168.2.19:8848"，容器有效期请咨询作者

开发文档

    import {
    getResourcePath
} from "@/uni_modules/wrs-previewfile"

• 获取项目里static文件夹里的文件路径

let url = getResourcePath("/static/utf8.txt")

• 预览文件使用官方的webview

<web-view :webview-styles="webviewStyles" :src="src"
    :style="'width:'+width+'px;height:'+height+'px;'"></web-view>

// 文件路径，注意如果路径里包含中文的时候需要编码正确，最好使用demo的编码接口
let fileUrl = "https://xx.xx.xx/xx.pdf"
// 服务器地址，服务器部署请点击上面"进入交流群"私聊作者
let host = "http://192.168.2.19:8848"

let src = host + "/preview?url=" + encodeURIComponent(Base64.encode(fileUrl))
// 如果需要水印可以加上下面水印参数
src = src + '&watermarkTxt=' + encodeURIComponent("水印")

• 预览本地文件

先调用上传接口上传文件，再采用预览云端文件的方式浏览文件

let host = "http://192.168.2.19:8848"
let uploadFileUrl = host + "/fileMgr/fileUpload"

uni.uploadFile({
    url: uploadFileUrl,
    filePath: path,
    name: 'file', // 固定为file
    success: (uploadFileRes) => {
        let data = uploadFileRes.data
        let isUploadSuc = false
        if (data) {
            let dataObj = JSON.parse(data)
            let code = dataObj.code
            const fileName = filePath.substring(filePath.lastIndexOf('/') + 1);
            if (code == 0) { // 上传成功
                isUploadSuc = true
                let content = dataObj.content

                this.previewFile(fileName)
            } else if (code == 1) { // 存在同名文件，请先删除原有文件再次上传
                isUploadSuc = true
                this.previewFile(fileName)
            }
        }
        if (!isUploadSuc) {
            this.showMsg("文件上传失败：" + JSON.stringify(uploadFileRes))
        }
    },
    fail: (error) => {
        this.showMsg("文件上传失败：" + JSON.stringify(error))
    }
});

• 删除服务器端缓存的文件

let fileName = "https://xx.xx.xx/xx.pdf" // 服务器文件地址
let host = "http://192.168.2.19:8848"
let deleteFileUrl = host + "/fileMgr/deleteFile?fileName=" + encodeStr(getFileUrl(fileName))

uni.request({
    url: deleteFileUrl,
    success: (res) => {
        console.log(res.data);

    }
 });