javascript - 在 JavaScript 中从服务器导出 Excel 表格

Question

我在 JavaScript 中导出表格时遇到问题。后端是 spring，我在 Controller 中的方法如下所示。

@PostMapping(produces = "application/vnd.ms-excel")
public void report(@RequestBody @Validated final ReportRequest reportRequest, final HttpServletResponse response, final Principal principal) {
    log.info("'{}' Requested report '{}'", principal.getName(), reportRequest);

    final List<Data> dataList = dataRepository.findAll(
            findByCriteria(
                    reportRequest.getFilterDatas(),
                    reportRequest.getId(),
                    reportRequest.getStartDate(),
                    reportRequest.getEndDate()));

    final SXSSFWorkbook workbook = excelService.generateExcelFromDraData(dataList, FILE_NAME);
    writeToOutputStream(response, workbook);
}

在前端，我使用 vue.js 和 axios 作为 http 客户端。导出方法为:

axios.post(
    url+'report',
    query,
    {headers: {
        "Access-Control-Allow-Headers" : "*",
        "X-XSRF-TOKEN": this.$cookie.get('XSRF-TOKEN')
      }
    }
  )
  .then((response) => {
    var a = document.createElement("a");
    document.body.appendChild(a);
    a.style = "display: none";

    var blob = new Blob([response.data], {type: "application/vnd.ms-excel"});
    var url = window.URL.createObjectURL(blob);
    a.href = url;
    a.download = 'report.xlsx';
    a.click();
    window.URL.revokeObjectURL(url);
  }, (error) => {

    }
  )

当我用 postman 点击“发送并下载”时，我得到了我想要的 Excel。但是当我从客户端执行此操作时，我在 console.log 中收到响应字节，但我无法打开 excel，并显示消息“excel 无法打开文件，因为文件格式或文件扩展名无效...”。如果我将report.xls作为名称，我会得到可以打开的excel，但有些字节没有任何意义。

有什么问题吗？

Answer 1

.xlsx 有不同的 MIME type :

.xlsx: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet

请注意，浏览器也以不同的方式处理文件下载。我已成功使用以下代码(您必须对其进行一些更改才能在您的应用程序中使用):

function successCallback (data) { //In my case data was already a Blob
    if (window.navigator.msSaveOrOpenBlob) { //for IE
      window.navigator.msSaveOrOpenBlob(data, 'file.xlsx');
    } else {
      var a = document.createElement("a");
      a.href = window.URL.createObjectURL(data.slice());
      a.target = '_blank';
      a.download = 'file.xlsx';
      a.dataset.downloadurl = ['application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', a.download, a.href].join(':');
      //a.click() got cancelled in firefox 
      var event = document.createEvent("MouseEvent");
      event.initMouseEvent(
              "click",
              true /* bubble */,
              false /* cancelable */,
              window, null,
              0, 0, 0, 0, /* coordinates */
              false, false, false, false, /* modifier keys */
              0 /*left*/, null
              );
      a.dispatchEvent(event);
    }
  }