[React, Spring Boot] 파일 다운로드(Blob)

파일 다운로드

 : DB에 있는 원본 BLOB 데이터를 가져와 화면에서 다운로드

 

React

const downloadFile = async (event, doc) => {
    event.preventDefault();
    const downloadUrl = '다운로드 url'
    const result = await axios.get(downloadUrl, {responseType : 'blob'}) // responseType 중요

    let blob = new Blob([result.data], { type: result.headers['content-type'] })


    let link = document.createElement('a')
    link.href = window.URL.createObjectURL(blob)
    link.target = '_self'
    link.setAttribute("download", `파일명.확장자`);
    link.click()
}

SpringBoot

// Controller
import org.springframework.core.io.ByteArrayResource;
import org.springframework.http.MediaType;
import org.springframework.http.ResponseEntity

...
...

@GetMapping(value = "/다운로드 url")
    public ResponseEntity<ByteArrayResource> downloadFile(DTO dto) {

        byte[] fileData = downloadService.selectFile(dto); // Retrieve the file data from the database

        if (fileData != null) {
          ByteArrayResource resource = new ByteArrayResource(fileData);

          return ResponseEntity.ok()
              .contentType(MediaType.APPLICATION_OCTET_STREAM)
              .contentLength(fileData.length)
              .body(resource);
        } else {
          return ResponseEntity.notFound().build();
        }
     }

// service는 byte[]에 맞게 db에서 select 해온 blob 데이터를 return 해주면 된다.