Экспорт таблицы Excel с сервера в JavaScript

Question

Экспорт таблицы Excel с сервера в JavaScript

1

У меня проблемы с экспортом таблиц в javascript. Backend - весна, и мой метод в контроллере выглядит так.

@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) => {

    }
  )

Когда я нажимаю "Отправить и Скачивать" с почтальоном, я получаю превосходство, которое я хочу. Но когда я делаю это от клиента, я получаю байты в ответ в console.log, но I'cant open excel с сообщением "excel не может открыть файл, потому что формат файла или расширение файла недействительны...". Если я поставил report.xls для имени, я получаю excel, который я могу открыть, но с некоторыми байтами, которые ничего не значат.

Любое предложение, что не так?

Matija Župančić 31 май 2017, в 11:55

Источник

Теги:

javascript

excel

vuejs2

axios

1 ответ

Ещё вопросы

barbsan · Answer 1 · 2017-05-31T06-57-00.000Z

.xlsx имеет другой тип MIME:

.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);
    }
  }

Ничего .. Все та же проблема и то же поведение ..
Возможно, попробуйте установить в axios.post параметра конфигурации axios.post responseType: 'blob' вместо того, чтобы конвертировать его в обратный вызов.
Я сделал это, поместив тип ответа для отправки запроса. axios.post( url+'report', query , {headers: { "Access-Control-Allow-Headers" : "*", "X-XSRF-TOKEN": this.$cookie.get('XSRF-TOKEN') }, responseType: "arraybuffer", } ).....