更新记录

1.0.2（2025-07-25） 下载此版本

• src属性兼容url传入

1.0.1（2025-02-05） 下载此版本

更新支持图片、音频、视频文件后缀

1.0.0（2025-01-20） 下载此版本

• 文件预览插件
• 集成视频、音频、图片文件在线预览
• 支持Office、pdf文件下载，调用外部引用打开

平台兼容性

uni-app(4.06)

ziqirj-file-preview 文件预览组件

组件名：ziqirj-file-preview 代码块： ziqirj-file-preview 关联组件：scss/sass, uni-popup, liu-progressbar

插件说明

• 1、文件预览插件
• 2、集成视频、音频、图片文件在线预览（弹窗模式）
• 3、支持Office、pdf文件下载（带下载进度条），调用外部引用打开

目前存在问题

• 仅能完整支持微信小程序，h5仅支持图片、音频

使用说明

组件参数

方法参数说明

// 打开文件预览弹窗方法
previewFile(item)

方法 [ previewFile ] 参数 [ item ] 数据格式，json类型

使用示例

<view class="content">
    <uni-list>
        <uni-list-item v-for="(item, index) in list" :key="index"
            :title="item.name" 
            :note="item.type" clickable 
            @click="previewFn(item)">
        </uni-list-item>
    </uni-list>

    <ziqirj-file-preview ref="filePreviewRef" />
</view>

export default {
    data() {
        return {
            title: '紫琪软件工作室',
            desc: '自定义组件开发项目',
            list: [
                {name: '2minute-demo', author: '紫琪软件', type: '', src: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4'},
                {name: '技术选型', author: '紫琪软件', type: '', src: 'https://qinganyuan-test.oss-cn-chengdu.aliyuncs.com/enterpriseLibrary/4b3933ab-ca19-477a-906e-a0f7754a03a4.docx'},
                {name: '183Club-真爱', author: '紫琪软件', type: 'mp3', src: 'https://qinganyuan-test.oss-cn-chengdu.aliyuncs.com/enterpriseLibrary/4eaa8234-950b-4a37-9724-a6aab33b70e4.mp3'},
                {name: 'fe6c726f1a934709421f9e80ec8aea64', author: '紫琪软件', type: '', src: 'https://qinganyuan-test.oss-cn-chengdu.aliyuncs.com/enterpriseLibrary/07d63081-c02e-489f-9e89-677baa5781aa.jpg'}
            ]
        }
    },
    onLoad() {

    },
    methods: {
        previewFn(item) {
            this.$refs.filePreviewRef.previewFile(item)
        }
    }
}

依赖组件

scss/sass

uni-popup

liu-progressbar

如使用过程中有任何问题，或者您对组件有一些好的建议，欢迎留言

紫琪程序猿