更新记录

1.0.0（2026-01-09）

• ✅ 支持多种文件格式预览
  • Word (.docx)
  • PDF (.pdf)
  • Excel (.xls, .xlsx)
  • TXT (.txt)
  • PowerPoint (.ppt, .pptx)
• ✅ 响应式设计，适配不同屏幕尺寸
• ✅ 支持文件缩放功能（Word 文档）
• ✅ 简洁美观的 UI 设计
• ✅ 支持 H5 平台
• ✅ 组件化设计，易于集成和使用

平台兼容性

uni-app(3.94)

其他

文件预览组件 (FilePreview)

项目介绍

FilePreview 是一个基于 uni-app 开发的文件预览组件，支持多种文件格式的在线预览，包括 Word、PDF、Excel、TXT 和 PowerPoint 等。该组件采用 iframe 嵌入方式，使用了多种第三方库来实现不同类型文件的预览功能。

功能特性

• ✅ 支持多种文件格式预览
  • Word (.doc, .docx)
  • PDF (.pdf)
  • Excel (.xls, .xlsx)
  • TXT (.txt)
  • PowerPoint (.ppt, .pptx)
• ✅ 响应式设计，适配不同屏幕尺寸
• ✅ 支持文件缩放功能（Word 文档）
• ✅ 简洁美观的 UI 设计
• ✅ 支持 H5 平台
• ✅ 组件化设计，易于集成和使用
• ✅ 封装为 uni_modules，一键导入即可使用

快速开始

安装组件

该组件已封装为 uni_modules，可直接在 uni-app 项目中使用。您可以通过以下两种方式安装：

1. 在 HBuilderX 中直接导入：

   • 打开 HBuilderX
   • 点击工具栏的 "插件市场"
   • 搜索 "文件预览组件"
   • 点击 "导入"

2. 手动复制到项目中：

   • 将 yxt-file-preview 目录复制到您的 uni-app 项目的 uni_modules 目录下

引入组件

uni_modules 组件会自动注册，无需手动引入，可直接在页面中使用：

<template>
  <view class="preview-container">
    <yxt-file-preview 
      :value="previewUrl" 
      :type="previewType" 
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      previewUrl: '',  // 文件 URL
      previewType: ''  // 文件类型
    };
  }
};
</script>

示例用法

基本使用

<template>
  <view class="container">
    <yxt-file-preview 
      :value="'https://example.com/demo.pdf'" 
      type="pdf" 
    />
  </view>
</template>

动态加载文件

<template>
  <view class="container">
    <button @click="loadFile">加载文件</button>
    <yxt-file-preview 
      v-if="showPreview" 
      :value="fileUrl" 
      :type="fileType" 
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      showPreview: false,
      fileUrl: '',
      fileType: ''
    };
  },
  methods: {
    loadFile() {
      // 模拟异步获取文件信息
      setTimeout(() => {
        this.fileUrl = 'https://example.com/demo.docx';
        this.fileType = 'word';
        this.showPreview = true;
      }, 1000);
    }
  }
};
</script>

属性说明

方法说明

浏览器兼容性

技术实现

核心依赖

项目结构

├── uni_modules/
│   └── yxt-file-preview/          # 文件预览组件
│       ├── components/            # 组件目录
│       │   └── yxt-file-preview/  # 主组件
│       ├── static/                # 静态资源
│       │   └── hybrid/            # 第三方预览库
│       ├── package.json           # 组件配置文件
│       └── README.md              # 组件说明文档

注意事项

1. 仅支持 H5 平台：该组件目前仅支持 H5 平台预览，其他平台暂不支持
2. 跨域问题：预览文件需要服务器支持跨域访问，否则可能无法正常预览
3. 性能问题：预览大文件时可能会有性能问题，建议文件大小不超过 50MB
4. 文件格式：确保传入的文件类型与实际文件格式一致，否则可能无法正常预览
5. 服务器环境：文件预览需要服务器环境，本地文件可能无法正常预览

常见问题

1. 为什么预览失败？

可能的原因：

• 文件 URL 不正确或文件不存在
• 文件类型与实际格式不符
• 服务器不支持跨域访问
• 浏览器不兼容

2. 预览大文件时卡顿怎么办？

• 建议优化服务器，提高文件传输速度
• 考虑对大文件进行压缩处理
• 对于特别大的文件，建议提供下载功能而非在线预览

3. 如何支持更多文件格式？

目前组件支持的文件格式有限，如需支持更多格式，可以：

• 扩展组件的文件类型映射
• 集成更多第三方预览库
• 自定义预览逻辑

版本更新记录

v1.0.0

• 初始版本，支持多种文件格式预览
• 封装为 uni_modules 组件
• 支持 H5 平台

许可证

MIT License

贡献

欢迎提交 Issue 和 Pull Request 来改进这个组件！

致谢

感谢以下开源项目的支持：

• docx-preview
• PDF.js
• LuckyExcel
• pptxjs