JS - 다운로드 버튼을 만드는 방법

 1. a 태그 사용

  이 방법은 가장 간단하며, HTML의 <a> 태그에 href 속성으로 다운로드할 파일의 경로를 지정하고, download 속성을 추가하여 구현할 수 있다. 보통 정적 파일을 다운로드하는 경우에 적합하다.

$("#btn_SaveExcel").on('click', function(e) {
var a = document.createElement('a');
 
                             a.href = uri + base64(format(template, ctx));
                              a.download  = "test(" + document.querySelector("#report_period_text").innerHTML + ")";
                              a.click();
                              //just in case, prevent default behaviour
                              e.preventDefault();
)}

 

2. Blob을 사용하여 동적으로 다운로드

  이 방법은 파일을 프로그래밍 방식으로 생성하거나 서버에서 동적으로 파일을 가져온 후 클라이언트 측에서 다운로드해야 할 때 유용하다. Blob 객체와 URL.createObjectURL을 사용하여 구현할 수 있다.

          // 다운로드 버튼 생성
          const downLoadAllBtn = document.createElement("button");
          downLoadAllBtn.innerHTML = "일괄 다운로드";
          downLoadAllBtn.style.backgroundColor = "#008a00"
          downLoadAllBtn.id="btnDownloadAll";
          downLoadAllBtn.onclick = (event) => {
            event.preventDefault();
            fetch("/api/file/MultiFileDownload", {
              method: "POST",
              headers: {
                'Content-Type': 'application/json'
              },
              body: JSON.stringify({
                atchFileId: self.atachFileId,
              })
            }).then(response => {
              // 파일 다운로드 처리
              if (response.ok && response.headers.get('Content-Type') === 'application/zip') {
                return response.blob();
              } else {
                return response.json().then(data => {
                  if (!data.success) {
                    alertify.error('파일 다운로드에 실패했습니다.');
                  }
                  throw new Error('Not a file download response');
                });
              }
            }).then(blob => {
              // Blob 객체를 사용하여 클라이언트에서 파일 다운로드 실행
              const url = window.URL.createObjectURL(blob);
              const a = document.createElement('a');
              a.href = url;
              a.download = "download.zip"; //파일명 설정
              document.body.appendChild(a);
              a.click();
              window.URL.revokeObjectURL(url);
              alertify.success('파일 다운로드가 시작되었습니다.');
            }).catch(error => {
              console.error('Error:', error);
              alertify.error('파일 다운로드 중 문제가 발생했습니다.');
            });
          }

  파일 다운로드를 구현함에 있어 이 두 가지 방법 외에도 서버 측에서 직접 다운로드를 처리하고 클라이언트에 다운로드 링크를 제공하는 방법 등 다양한 방법이 있다.