file-priview-pro

一个轻量级、可扩展的文件预览组件，支持图片、PDF、Word、Excel、视频、音频和文本文件。

特性

• 🖼️ 多格式支持：支持 JPG, PNG, PDF, DOCX, XLSX, MP4, MP3, TXT 等多种格式。
• 🔌 插件化架构：基于策略模式设计，易于扩展新的文件处理器。
• 📦 开箱即用：提供统一的 API，无需关心底层实现细节。
• 🛠️ TypeScript：完全使用 TypeScript 编写，提供完整的类型定义。

安装

方式一：npm 安装 (推荐)

如果包已发布到 npm：

npm install file-priview-pro

快速开始

1. 引入样式

在你的入口文件 (如 main.ts 或 App.vue) 中引入 CSS：

import 'file-priview-pro/dist/file-preview.css';

2. 基本使用

import { Previewer } from 'file-priview-pro';

// 1. 准备一个容器
const container = document.getElementById('preview-container');

// 2. 初始化预览器
const previewer = new Previewer(container);

// 3. 监听事件 (可选)
previewer.on('start', () => console.log('开始加载...'));
previewer.on('success', () => console.log('加载成功!'));
previewer.on('error', (err) => console.error('加载失败:', err));

// 4. 预览文件 (file 对象通常来自 <input type="file">)
const fileInput = document.getElementById('file-input');
fileInput.addEventListener('change', (e) => {
  const file = e.target.files[0];
  if (file) {
    previewer.preview(file);
  }
});

重要注意事项：PDF 预览

由于 PDF.js 的限制，你需要手动处理 Worker 文件。

1. 复制 Worker 文件： 将 node_modules/pdfjs-dist/build/pdf.worker.min.mjs 复制到你项目的静态资源目录 (如 public/ 或 static/)。

2. 确保路径正确： 默认情况下，预览器会尝试加载 pdf.worker.min.mjs。如果你的静态资源有特定路径前缀，可能需要额外配置（目前版本默认请求根路径）。

API 文档

Previewer

• constructor(container: HTMLElement): 初始化预览器。
• preview(file: File): Promise<void>: 预览指定文件。
• on(event, callback): 监听生命周期事件 (start, success, error, progress)。

扩展开发

你可以通过继承 BaseHandler 来添加自定义文件类型的支持：

import { BaseHandler, FileType } from 'file-priview-pro';

class MyCustomHandler extends BaseHandler {
  supportedFileTypes = ['my-ext']; // 支持的扩展名

  async render(container: HTMLElement, file: File) {
    container.innerHTML = '这是我的自定义预览逻辑';
  }
}

// 注册自定义处理器
// (当前版本暂未开放公开的注册 API，后续版本将支持 previewer.registerHandler)

License

ISC