Next.js中@cyntler/react-doc-viewer本地XLSX加载失败求助及库推荐

原因分析 #

• Next.js静态资源路径处理差异：你把XLSX文件放在public目录后，组件对PDF和XLSX的本地路径处理逻辑不一致——PDF依赖浏览器原生渲染，能直接识别/开头的相对路径；但XLSX依赖的解析库（如xlsx）需要完整可访问的资源URL，直接传/bbbb.xlsx会被组件误认为是客户端本地文件，无法正确读取。
• 组件XLSX渲染器的路径兼容问题：@cyntler/react-doc-viewer的XLSX渲染模块对本地相对URL的支持存在缺陷，而S3的完整HTTP URL能被组件正常fetch，PDF则因为浏览器内置支持绕开了这个问题。

解决方案 #

方案1：补全资源基础URL #

确保bbbb.xlsx放在项目根目录的public文件夹中，然后用环境变量拼接基础URL，避免路径解析错误：

const doc = [{ uri: `${process.env.NEXT_PUBLIC_BASE_URL || ""}/bbbb.xlsx` }];

方案2：将本地XLSX转为Blob对象传入 #

在服务端读取文件转为Blob，再传给客户端使用，绕开组件的路径解析问题：

// 服务端组件或API路由中读取文件
import fs from 'fs';
import path from 'path';

export async function getServerSideProps() {
  const filePath = path.join(process.cwd(), 'public', 'bbbb.xlsx');
  const fileBuffer = fs.readFileSync(filePath);
  const blob = new Blob([fileBuffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
  const fileUrl = URL.createObjectURL(blob);
  
  return { props: { fileUrl } };
}

// 客户端组件中使用
const doc = [{ uri: fileUrl }];

方案3：更新组件版本 #

尝试把@cyntler/react-doc-viewer更新到最新版本，旧版本可能存在本地XLSX路径处理的bug：

npm update @cyntler/react-doc-viewer

推荐React办公文档查看库 #

• react-pdf：专注PDF渲染，轻量且自定义性强，适合只需要PDF查看的场景。
• sheetjs/react-data-grid：主打Excel文件解析与渲染，支持数据编辑，比通用文档查看器更专注Excel场景。
• mammoth：专注Word（.docx）文档渲染，轻量且转换质量高，适合处理Word文件的需求。
• viewerjs-react：基于Viewer.js，支持PDF、ODT、ODS、DOCX等多种格式，兼容性较好。

内容的提问来源于stack exchange，提问作者Haluk Aydogan