react-doc-viewer无法打开xlsx与doc文件的问题求助

• pdf与图片文件可正常打开，但xlsx和doc文件无法加载
• 文件路径确认无误（pdf文件能正常打开）
• 控制台报错：https://view.officeapps.live.com/op/en-PL/strings.js 未找到

相关代码 #

import { Card, CardHeader, CardBody, CardTitle, CardText, CardLink } from 'reactstrap'
import DocViewer, {DocViewerRenderers} from "react-doc-viewer"
const testURL2 = "http://10.0.1.31:7764/documentations/test-excelaki.xlsx"
const testURL3 = "http://10.0.1.31:7761/BasFLOW_pliki/testEOD/test-doc.doc"
const testURL4 = "http://10.0.1.31:7761/BasFLOW_pliki/testEOD/test-excelaki.xlsx"
const testPDF = "http://10.0.1.31:7764/files/KorektyKalendarzyINS.pdf"
const testExcel = "http://eod:7764/files/TJMmalarnia.xlsx"

const DTinstruction = () => {
  const docs = [
    { uri: testPDF, fileType: "pdf"}, 
    {uri:testExcel, fileType: "xlsx"}, 
    {uri:"http://10.0.1.31:7761/BasFLOW_pliki/testEOD/test-doc.doc", fileType: "docx"}, 
    {uri:"http://10.0.1.31:7761/BasFLOW_pliki/testEOD/test-excelaki.xlsx", fileType: "xlsx"}, 
    {uri:"http://10.0.1.31:7764/files/sample.png", fileType: "png"}
  ]

  return (
    <Card>
      <CardHeader>
        <CardTitle>Wybierz aplikacje dt🙌</CardTitle>
      </CardHeader>
      <CardBody>
      <DocViewer
         documents={docs} 
         config={{
             header: {
               disableHeader: false,
               disableFileName: false,
               retainURLParams: false
              }
            }}
            pluginRenderers={DocViewerRenderers}
          style={{ height: 500 }}
        />
      </CardBody>
    </Card>
  )
}

export default DTinstruction

可行解决方案 #

1. 修正文件类型配置错误 #

代码中把.doc文件的fileType错误设置为docx，导致渲染器匹配失败，先修正：

// 原错误配置
{uri:"http://10.0.1.31:7761/BasFLOW_pliki/testEOD/test-doc.doc", fileType: "docx"}
// 修正后
{uri:"http://10.0.1.31:7761/BasFLOW_pliki/testEOD/test-doc.doc", fileType: "doc"}

2. 解决Office Online Viewer资源加载问题 #

react-doc-viewer对Office格式（xlsx/doc）默认依赖Office Online Viewer渲染，出现strings.js未找到的问题，通常是内网无法访问Office CDN，或文件服务器未配置CORS导致的，可按以下两种思路解决：

方案A：替换为本地渲染插件

放弃Office Online Viewer，使用纯前端库实现本地渲染，需自定义react-doc-viewer的渲染器：

• Excel文件：用xlsx + react-excel-renderer实现渲染组件
• Word文件：用mammoth.js实现渲染组件

示例代码：

import { DocViewer, DocViewerRenderers } from "react-doc-viewer";
import ExcelRenderer from "./components/ExcelRenderer"; // 自定义Excel渲染组件
import WordRenderer from "./components/WordRenderer"; // 自定义Word渲染组件

// 合并自定义渲染器与默认渲染器
const customRenderers = [
  ...DocViewerRenderers,
  {
    fileTypes: ["xlsx", "xls"],
    renderer: ExcelRenderer,
  },
  {
    fileTypes: ["doc", "docx"],
    renderer: WordRenderer,
  },
];

// 在组件中使用自定义渲染器
<DocViewer
  documents={docs}
  pluginRenderers={customRenderers}
  style={{ height: 500 }}
/>

方案B：修复Office Online Viewer资源加载

如果必须使用Office Online Viewer，可手动引入官方脚本，并检查区域配置：

• 在项目public/index.html中添加：

<script src="https://view.officeapps.live.com/op/embed.js"></script>

• 确认react-doc-viewer的区域配置，避免加载错误语言版本的资源文件

3. 配置文件服务器CORS #

确保文件服务器（如http://10.0.1.31）配置了CORS规则，允许view.officeapps.live.com域名访问资源，否则Office Online无法拉取文件进行渲染。

内容的提问来源于stack exchange，提问作者Grzegorz Krzyżański