React使用docxtemplater生成docx时报找不到中央目录结尾错误求助

该报错的核心原因是 PizZip 加载到的内容不是合法的 docx 压缩包，绝大多数场景都是静态资源路径错误，导致实际加载到的是404页面的HTML内容而非docx文件

• 方案1：将模板放在public静态资源目录
  如果是使用CRA、Vite等构建工具，public目录下的文件会被原样作为静态资源输出，你可以：

  1. 在项目public目录下新建docs文件夹，将newTemplate.docx移入该目录
  2. 修改loadFile的路径参数为/docs/newTemplate.docx即可，代码示例：

  loadFile("/docs/newTemplate.docx",function (error, content) {
    // 原有逻辑不变
  })
  

• 方案2：通过import引入src目录下的模板
  如果要把模板放在src/assets目录下，不能直接写相对路径调用，需要先通过import导入资源，构建工具会自动返回打包后的正确资源路径：

  1. 顶部导入模板文件：

  // CRA项目直接导入
  import newTemplate from './assets/docs/newTemplate.docx';
  // Vite项目需要加?url后缀
  // import newTemplate from './assets/docs/newTemplate.docx?url';
  

  2. 调用loadFile时使用导入的变量作为路径：

  loadFile(newTemplate,function (error, content) {
    // 原有逻辑不变
  })
  

• 验证排查方法
  可以先打开浏览器开发者工具的Network面板，点击生成按钮后查看docx文件的请求：

  1. 确认请求状态码是200，不是404
  2. 确认响应内容是二进制格式，不是HTML代码
  3. 可以打印content的字节长度，正常docx文件至少有几千字节，若只有几百字节基本可判定是加载到了错误内容

如果排除路径问题后仍报错，可以先用Office新建一个空白docx，只写入测试占位符{client_name}后重试，排除模板本身损坏、格式不标准的问题。

内容的提问来源于stack exchange，提问作者Siva Katari