ReactJS에서 파일 다운로드 처리 방안

요즘 ReactJS를 이용해서 개발을 진행하고 있습니다.

사용하면서 간간히 만나는 문제들을 풀어가고 있는데,

API에서 DOWNLOAD를 구현하고 React에서 해당 결과를 받아 보니 처음 보는 ReadableStream가 튀어 나왔습니다.

처리 방법은 여러가지가 있었는데, 우선 나는 다음과 같이 처리 했습니다.

ReadableStream을 blob으로 변경하여 file-saver 전달 하였습니다.

처리 코드

 import fileDownload from 'file-saver';

 const callFileDownload = async (file_name, file_path) => {
    const res = await CustomFetch('/fileDownload', {
      responseType: 'blob',
      method: 'POST', headers: {
        'Content-Type': 'application/json',
      },
    }, {
      "_id": noticeId,
      file_name,
      file_path
    });

    fileDownload(await (await new Response(res.body)).blob(), file_name);

  }

다음에 또 ReadableStream을 만나면 쫄지말아야겠습니다.

참고 자료

• Using readable streams
• ReadableStream
• file-saver