Fetch 함수로 파일 다운로드 받기

 

특정 API에서 파일 다운로드를 제공할 때, 이를 받아들이는 Javascript 예제.

파일명은 API의 Header에 'Content-Disposition' 값에서 가져온다.

 

fetch('/api/download')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }

    // Content-Disposition 헤더에서 파일명 추출
    const contentDisposition = response.headers.get('Content-Disposition');
    const filenameRegex = /filename="?([^"]+)"?/i;
    const matches = filenameRegex.exec(contentDisposition);
    const filename = matches && matches[1];

    return response.blob();
  })
  .then(blob => {
    const url = window.URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = url;
    link.setAttribute('   
download', filename || 'download.bin'); // 파일명이 없을 경우 기본값 설정
    document.body.appendChild(link);
    link.click();
    window.URL.revokeObjectURL(url);
  })
  .catch(error => {
    console.error('Error:', error);
  });