workApp

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

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

---

功能特性

• 支持文件类型：pdf、word、excel、pptx、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 :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 | pptx | txt。

方法（Methods）

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

---