React下载Excel文件损坏。

Question

我正在尝试通过调用Spring REST端点在Reactjs中下载一个Excel文件，但是我遇到了文件损坏的问题。

React代码...

getFile(){
    axios.get('get/download')
        .then((response) => {
            var blob = new Blob([response.data], {type:'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'});
            filesaver.saveAs(blob, "excel.xlsx");
        });
}

Spring控制器负责处理传入的Web请求，并将响应发送回客户端。它们通常使用注释@RequestMapping指定要处理的URL路径和请求方法。控制器可以读取输入数据并使用服务和存储库进行逻辑处理，最终生成并返回响应。

在Spring MVC中，控制器是基于Servlet API构建的，并且通常通过RequestMappingHandlerMapping进行注册。可以使用各种技术来测试控制器，包括单元测试和集成测试。

@RequestMapping(value = "/download", method = RequestMethod.GET)
    public void downloadExcelFile(final HttpServletResponse response) throws IOException {
        response.setHeader("Content-Encoding", "UTF-8");
        response.setHeader("Content-Disposition", "attachment; filename="file.xlsx");
        response.setContentType("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet");

        final File xls = service.createExcelFile(response);

        final FileInputStream in = new FileInputStream(xls);
        final OutputStream out = response.getOutputStream();

        final byte[] buffer = new byte[8192];
        int length;

        while ((length = in.read(buffer)) > 0) {
            out.write(buffer, 0, length);
        }
        in.close();
        out.close();
    }

服务是指计算机网络技术中的一种模式，通过该模式，软件应用程序可以作为互联网上的服务提供给其他应用程序使用。

 public File createExcelFile(final HttpServletResponse response) {
     XSSFWorkbook xssfWorkbook = null;
     final File xls = new File("excel.xlsx");
        try {
            final FileOutputStream fos = new FileOutputStream(xls);

            xssfWorkbook = new XSSFWorkbook();
            //setup excel file...
            xssfWorkbook.write(fos);
            xssfWorkbook.close();
       }
       catch (final Exception e) {
           LOGGER.error(String.format("Something went wrong"));
       }
    return xls;
 }

当我执行上述代码时，我得到一个Excel文件，但查看response.data似乎...

"PKs��J_rels/.rels���j�0��}↵�{㴃1F�^Ơ�2��l%1I,c�[�

尝试打开文件时，我收到了“由于数据不可读取而无法打开文件”的错误提示。在服务器上创建的文件可以正常打开。

欢迎任何建议。

谢谢

- rogger2016

---

new Blob([response], 怎么样？（我不确定为什么编码数据在 data 字段中） - Anthony Kong

遇到类似问题了。有什么进展吗？ - Sudhir Shrestha

我们可以使用以下链接 https://dev59.com/X1MI5IYBdhLWcg3wFXSg#59711648。 - Md. Nazrul Islam

Answer 1

您只需在axios请求中添加响应类型：

responseType: 'arraybuffer'

在我的应用程序中，以下函数下载Excel文件：

function exportIssues() {
  axios.get('/issues/export', { responseType: 'arraybuffer' })
    .then((response) => {
      var blob = new Blob([response.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
      fileSaver.saveAs(blob, 'fixi.xlsx');
    });
}

- Ajinkya

---

这让我卡了一小会儿！ - rolandforbes