更新记录

1.0.0（2025-10-10） 下载此版本

V1.0.0

• 变更说明：支持 H5 端预览 pdf、excel、word、txt 文件。

平台兼容性

其他

wg-h5-preview-file（H5 文件预览组件）

支持在 H5 端预览 PDF、Word、Excel、TXT 常见办公文件。提供页面跳转式预览与 API 直接调用两种集成方式，开箱即用。

功能特性

• 支持文件类型：pdf、word、excel、txt
• H5 端 iframe 内嵌预览页面，免安装第三方 App
• 提供两种集成方式：页面跳转式、API 直接调用
• 适配常见移动端与 PC 端浏览器

安装与引入

1. 将 uni_modules/wg-h5-preview-file 放入项目 uni_modules/ 目录。
2. 在使用页面内直接使用组件标签 <wg-h5-preview-file /> 即可。

uni-app 会自动按需注册 uni_modules 下的组件，一般无需手动 components 注册。

组件用法概览

基础用法（页面跳转方式中使用，被动接收 URL 与类型并立即展示）：

<template>
    <wg-h5-preview-file ref="previewFile" :value="file.url" :type="file.type" />
</template>

API 方式（在任意页面中通过 ref 主动打开预览）：

<template>
    <view>
        <button @click="open">预览文件</button>
        <wg-h5-preview-file ref="previewFile" />
    </view>
</template>

<script>
export default {
    data() {
        return {
            file: { url: "/static/demo.pdf", type: "pdf" },
        };
    },
    methods: {
        open() {
            this.$refs.previewFile.preview({
                url: this.file.url,
                type: this.file.type,
            });
        },
    },
};
</script>

属性（Props）

• value：String，必填。要预览的文件 URL。例如：/static/git.pdf。
• type：String，必填。文件类型，限定为：pdf | word | excel | txt。

组件内部会根据 type 选择对应的预览页：

• word → /uni_modules/wg-h5-preview-file/static/hybrid/word.html?file=
• pdf → /uni_modules/wg-h5-preview-file/static/hybrid/pdf/web/viewer.html?file=
• excel → /uni_modules/wg-h5-preview-file/static/hybrid/excel.html?file=
• txt → /uni_modules/wg-h5-preview-file/static/hybrid/txt.html?file=

方法（Methods）

• preview({ url, type })：
  • 说明：通过引用调用，主动打开预览。
  • 参数：
    • url：String，文件 URL。
    • type：String，pdf | word | excel | txt。