Файл Excel поврежден при загрузке с помощью ReactJs jQuery ajax post request

Question

Я пытаюсь загрузить файл с помощью jQuery ajax post request от ReactJs. И у меня есть средний уровень экспресс-маршрутизатора, который использует Request api для отправки запроса в Spring Boot rest api. ajax => экспресс почтовый маршрут => Spring Boot api. Файл загружается, но содержимое постоянно повреждено.

Я перепробовал все решения, предоставляемые через Интернет, но ни одно из них не работает для меня.

// ajax calling express post route
$.ajax({
            url: "/downloadReport",
            contentType: 'application/json',
            data:JSON.stringify({"data1":"value1"}),
            type:'POST',
            cache: true,
            responseType: 'arraybuffer',
            success: function(response) {
                console.log(response);
                var fileName=response.headers['content-disposition'].split('filename=')[1];
                var blob = new Blob([response.data], {type:'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'});
                const blobURL = window.URL.createObjectURL(blob);
                const tempLink = document.createElement('a');
                tempLink.style.display = 'none';
                tempLink.href = blobURL;
                tempLink.setAttribute('download', fileName);
                tempLink.click();

            }.bind(this),
            error: function(xhr, status, err) {
                console.log(err)
                console.log(status)
                console.log(xhr)
            }.bind(this)
        })

// express route.
router.post("/downloadReport", (req, response, next) => {
    request(
        {
            url: '/springbootapi/downloadCustomerReport',
            method: "POST",
            body: JSON.stringify(req.body),
            headers: {
                'Content-Type':'application/json'
            },
        }, function (error, res, body) {
            if(error){
                console.log(error);
                response.status(500).send(error);
            }else{
                try {
                    response.send({headers: res.headers, data: res.body})
                }catch(err){
                    response.status(500).send(err)
                }
            }
        }
    )
});

// in springboot rest api
@RequestMapping(value = "/downloadCustomerReport", method = RequestMethod.POST)
    public ResponseEntity<byte[]> downloadCustomerReport(@RequestBody SamplesDataRequestHolderVO samplesDataRequestVO){
byte[] resource = null;
try(Workbook workbook = new XSSFWorkbook();
                ByteArrayOutputStream out = new ByteArrayOutputStream();){
// I have create and attached worksheet
workbook.write(out);
writeToFile(new ByteArrayInputStream(out.toByteArray()));
resource = out.toByteArray();
}


HttpHeaders headers = new HttpHeaders(); 
       headers.setContentType(MediaType.valueOf("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"));
        headers.add(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename=CR Final.xlsx");

        return ResponseEntity.ok()
                .headers(headers)
                .body(resource);


}

Я сохранил файл из Spring Boot, и все в порядке. И я попробовал от Почтальона и скачать ответ. Это также хорошо, и в файле нет проблем. Но когда я пытался отреагировать, он всегда был поврежден. Я получаю данные в формате ajax как

'ПК [N [Content_Types] .xmlTIn1'.

Я сравнил данные ответов в ajax и Postman, и они совпадают. Как я могу это отладить?

Answer 1

Я заработал, кодировав bytearray с помощью Base64 в контроллере Springboot и отправив тело ответа в виде зашифрованной строки.

@RequestMapping(value = "/downloadCustomerReport", method = RequestMethod.POST)
    public ResponseEntity<String> downloadCustomerReport(@RequestBody SamplesDataRequestHolderVO samplesDataRequestVO) throws IOException {
        byte[] resource = null;
try(Workbook workbook = new XSSFWorkbook();
                ByteArrayOutputStream out = new ByteArrayOutputStream();){
// I have create and attached worksheet
workbook.write(out);
writeToFile(new ByteArrayInputStream(out.toByteArray()));
resource = out.toByteArray();
}
        HttpHeaders headers = new HttpHeaders(); 
       headers.setContentType(MediaType.valueOf("application/octet-stream"));
        headers.add(HttpHeaders.CONTENT_DISPOSITION, "attachment; filename=CR Final.xlsx");
String s = Base64.getEncoder().encodeToString(resource); // encoded my bytearray here
        return ResponseEntity.ok()
                .headers(headers)
                .body(s);
    }

, а затем во внешнем интерфейсе я использовал функцию base64StringToBlob из библиотеки blob-util и изменил тип на application / xlsx:

var blob = base64StringToBlob(response.data, 'application/xlsx');