File Display Component

一个强大的文件预览组件，支持PDF、Markdown、Excel等多种文件格式。

PDF浏览器兼容性解决方案

问题描述

在火狐浏览器等旧版本浏览器中，PDF预览可能出现"private fields are not currently supported"错误，这是因为新版本的PDF.js使用了ES2022的私有字段特性。

解决方案

1. 降级依赖版本

已将以下依赖降级到兼容旧版本浏览器的版本：

• react-pdf: ^9.2.1 → ^7.7.0
• pdfjs-dist: 4.8.69 → 3.11.174

2. 添加Legacy支持

在Vite配置中添加了@vitejs/plugin-legacy插件，提供现代JavaScript特性的polyfill支持。

3. 浏览器兼容性目标

targets: [
  "chrome >= 60",
  "firefox >= 75", 
  "safari >= 12",
  "not ie <= 11"
]

安装和构建

1. 安装依赖：

pnpm install

2. 开发模式：

pnpm dev

3. 构建：

pnpm build

使用说明

基本用法

import { FileViewer } from '@mxmweb/file-viewer';

<FileViewer
  content="https://example.com/document.pdf"
  onClose={() => console.log('关闭预览')}
  fileName="文档.pdf"
/>

PDF Worker配置

组件会自动注册PDF.js worker，默认路径为/worker/pdf.worker.min.js。

如需自定义worker路径：

import { registerPDFWorker } from '@mxmweb/file-viewer';

// 在应用初始化时注册
registerPDFWorker('/custom/path/to/pdf.worker.min.js');

注意事项

1. 确保服务器正确提供PDF.js worker文件
2. 对于生产环境，建议将worker文件部署到CDN
3. 如果仍有兼容性问题，可以进一步降级到更老的版本

故障排除

如果遇到PDF预览问题：

1. 检查浏览器控制台是否有错误信息
2. 确认worker文件路径是否正确
3. 验证PDF文件是否可以正常访问
4. 检查网络请求是否成功

版本历史

• v1.9.8: 修复PDF浏览器兼容性问题
  • 降级react-pdf到7.7.0
  • 降级pdfjs-dist到3.11.174
  • 添加legacy插件支持