자바스크립트 파일 다운로드

MDN <a> 공식문서

 

자바스크립트 파일 다운로드는 정말 간단하다. <a> 태그의 속성인 download에 url을 지정해주면 된다.

<a
    class="btn btn-link"
    :href="attachment.path"
    :download="attachment.name"
>

끝!!

 

.

.

.

.

 

하지만 이렇게 다운로드를 하게 되면 파일 명이 url로 저장되어 버린다.

 

이 이미지의 이름은 원래 image.png 였는데, 어떻게 하면 원래의 이미지로 다운을 할 수 있을까

 

 

a 태그에 클릭 이벤트로 downloadResource를 걸어주었다.

    downloadResource(url, filename) {
      fetch(url)
        .then((response) => {
          return response.blob();
        })
        .then((blob) => {
          const blobURL = window.URL.createObjectURL(blob);
          const a = document.createElement("a");
          a.download = filename;
          a.href = blobURL;
          document.body.appendChild(a);
          a.click();
          a.remove();
          window.URL.revokeObjectURL(blobURL);
        })
        // error handling
        .catch(() => {});
    },

우선 <a>에 href로 달려있던 url로 fetch 요청을 통해 reponse를 생성하여 blob 객체를 반환하도록 한다.

그 후 blob 객체로부터 url을 생성하고 화면에 보이지 않도록 스크립트 내부에만 존재하는 a 태그를 생성하여 name 과 url을 넣어주면 된다.

 

자바스크립트에서 blob 객체는 이미지, 사운드, 비디오와 같은 멀티 미디어 데이터를 다룰 때 사용하고 type은 데이터의 MIME 타입 을 가진다.

 

blob과 blobURL 콘솔

 

내가 서버로부터 받은 데이터는 application/octet-stream 타입인데 8비트 단위의 binary data이다.

 

URL.createObjectURL() 정적 메서드는 주어진 객체를 가리키는 URL을 DOMString으로 반환합니다. 해당 URL은 자신을 생성한 창의 document가 사라지면 함께 무효화됩니다
URL.revokeObjectURL() 정적 메서드는 이전에 URL.createObjectURL()을 통해 생성한 객체 URL을 해제합니다. 객체 URL을 더는 쓸 일이 없을 때 사용해서, 브라우저가 이제 해당 객체를 메모리에 들고 있지 않아도 된다고 알려주세요.
-MDN-

 

createObjectURL로 생성한 DOMString은 브라우저에서 사용 가능하다고 판단되어 GC(가비지 콜랙터)에 의해 정리되지 않으므로 이를 방지하기 위해 revokeObjectURL을 통해 메모리에서 해제해준다.

 

 

출처

 

https://developer.mozilla.org/ko/docs/Web/API/URL/revokeObjectURL

URL.revokeObjectURL() - Web API | MDN

https://heropy.blog/2019/02/28/blob/

Blob(블랍) 이해하기

https://developer.mozilla.org/ko/docs/Web/API/DOMString

DOMString - Web API | MDN

https://developer.mozilla.org/ko/docs/Web/API/URL/createObjectURL

URL.createObjectURL() - Web API | MDN