反应无法得到restController的响应

Question

我曾尝试使用restController生成文件字节数组，但当我返回它做出反应时，react没有得到字节数组。前端正在使用react，后端正在使用spring restController，我使用Http进行前后通信。我的代码有什么问题吗？谢谢你的帮助。

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!!')
        }
    })
}

回应：enter image description here

更新2018/09/16：

我在react函数中添加了一些代码，最后可以下载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()
    })

响应：

enter image description here

Answer 1

因此，从您的网络图中，您的请求看起来像预期的那样完成，但您无法从响应中派生出ByteArray。

使用正常请求返回e.x的JSON或XML。你可以一次阅读它们，因为它们是身体的一部分。然而，在你的情况下，你的身体包含Stream。因此，您必须自己处理该流。

你可以用response.blob()做到这一点：

blob()方法读取流完成并返回Blob对象。然后，您可以使用此blob对象嵌入图像或download the file。出于所有意图和目的，我建议使用它。除非您处理大文件（> 500 MB），否则它应该满足您的需求。

例如：

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界面来更精细地控制您想要使用它做什么。