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

08 Dec 2019

Reading time ~1 minute

요즘 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을 만나면 쫄지말자!

참고 자료