реагировать не может получить ответ restController

Question

Я пытался использовать restController для генерации файлового байтового массива, но когда я возвращаю его, чтобы реагировать, реакция не получала байтовый массив. front-end использует реагирование, back-end использует пружинный restController, а я использую Http для связи как front, так и back. это неправильно в моем коде? Спасибо за вашу помощь.

restController:

String fileName = DateUtility.dateToStr(new Date(), DateUtility.YYYYMMDD_HHMMSS) + " - "
            + reportNmaeByType.get(exportParam.getReportType()) + ".xls";
    HttpHeaders headers = new HttpHeaders();
    headers.setContentDispositionFormData("attachment", fileName);
    headers.setContentType(MediaType.APPLICATION_OCTET_STREAM);

    return new ResponseEntity<>(excelByte, HttpStatus.OK);

реагировать:

createExcelFile(){
    var params = {
    reportResultList: this.state.reportResult, 
    reportType: getReportSelector().state.selectedReportType,
    selectColumnMap: this.state.selectColumn,
    selectCusColumnMap: this.state.selectCusColumn
                }
    fetch("http://localhost:8080/mark-web/file/createExcel", {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify(params)
    }).then(res => {
        if (res.ok) {
            console.log(res)
            console.log(this)
             console.log('create excel success!!')
        } else {
            console.log('create excel Fail!!')
        }
    })
}

Ответ: введите описание изображения здесь

Обновление 2018/09/16:

Я добавил некоторый код в функцию реагирования, и он, наконец, может загрузить файл Excel, но файл поврежден. Я проверил объект BLOB в ответ. это показывает, что BLOB-объект JSON. потому что я не декодировал объект blob?

Реагировать:

}).then(res => {
       if(!res.ok){
        console.log("Failed To Download File")
       }else{
        return res.blob()
       }
    }).then(blob => {
        console.log(blob)
        let url = URL.createObjectURL(blob)
        console.log(url)
        var downloadAnchorNode = document.createElement('a')
        downloadAnchorNode.setAttribute("href", url)
        downloadAnchorNode.setAttribute("download", "excel" + ".xls")
        downloadAnchorNode.click()
        downloadAnchorNode.remove()
    })

Ответ:

введите описание изображения здесь

Answer 1

Итак, из вашего сетевого графика выглядит, как будто ваш запрос завершается, как и ожидалось, но вы просто не можете получить ByteArray из ответа.

С обычными запросами, которые возвращают JSON или XML для e.x. Вы можете прочитать их за один раз, так как они являются частью тела. В вашем случае, однако, ваше тело содержит Stream. Таким образом, вам придется самостоятельно обрабатывать чтение этого потока.

Вы можете сделать это с помощью response.blob():

Метод blob () читает поток до конца и возвращает объект Blob . Затем вы можете использовать этот объект blob для встраивания изображения или скачать файл . Для всех целей и целей я бы порекомендовал использовать это. Если вы не имеете дело с большими файлами (> 500 МБ), этого должно быть достаточно для ваших нужд.

Например:

fetch("http://localhost:8080/mark-web/file/createExcel", {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
    },
    body: JSON.stringify(params)
    }).then(res => {
        if (!res.ok) { 
            throw new Error(res.statusText);
        } else {
            return res.blob()
        }
   }).then(blob => {// do your thing})
   .catch(err => console.log(error))

Или

Вы можете использовать экспериментальный интерфейс ReadableStream для более детального контроля над тем, что вы хотите с ним делать.