When downloading a file using ResponseEntity in Spring, byte breaks in reaction - reactjs

Question

This is a method of downloading files from Spring to ResponseEntity.
When you download it, the byte breaks and comes out.
If you use tag a, you can download the file without breaking it, but it is difficult to put the event after downloading the file using response.
Is there a way?
// Spring
Resource resource = qnaService.loadAsResource(tempFileName);
File file = resource.getFile();
if (file.exists()) {
HttpHeaders headers = new HttpHeaders();
headers.setContentType(MediaType.APPLICATION_OCTET_STREAM);
headers.setContentDispositionFormData("attachment", fileName);
headers.setCacheControl("must-revalidate, post-check=0, pre-check=0");
headers.set("Content-Transfer-Encoding", "binary");
return ResponseEntity.ok()
.header(HttpHeaders.CONTENT_DISPOSITION, "attachment;filename=" + OriginFileName)
.contentType(MediaType.APPLICATION_XML)
.contentLength(file.length())
.body(new InputStreamResource(new FileInputStream(file)));
}
// React
const data = await request({
url: `/api/qna/file/test/${node.qnaFileID}`,
method: request.method.get(),
});
console.log(data);
const blob = new Blob([data], { type: 'application/xml;charset=utf-8' });
saveAs(blob, node.name);
// Data is broken.
data: "�PNG\r\n\u001a\n\u0000\u0000\u0000\rIHDR\u0000\u0000\t�\u0000\u0000\u0004z\b\u0006\u0000\u0000\u0000�س]\u0000\u0000\fliCCPICC Profile\u0000\u0000H��W\u0007XS�\u0016�[RIh\u0001\u0004���\u0004�\u001a#J\b-��"�\bI �Ę\u0010T�eQ���\b��U\u0011Ŷ\u0002bǮ,��/\u0016T�uQ\u0017\u0

Answer 1

just add responseType: blob to your request