일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 |
- Django
- 세션
- 뷰
- 예외처리
- jest
- Router
- NavigationDuplicated
- vuetify
- vue #vue.js #font #web-font
- virtual dom
- lazy loading
- 안드로이드
- 로컬스토리지
- 라우터
- 프론트엔드
- 성능 최적화
- vue-router
- 세션스토리지
- 자바스크립트 #javascript #렌더링 #렌더링순서
- cubic-bezier
- frontend
- 렌더링 최적화
- VUE
- 주니어 개발자
- Transition
- 장고
- css
- webpack
- DOM
- vue.js
- Today
- Total
한준호
자바스크립트 파일 다운로드 본문
자바스크립트 파일 다운로드는 정말 간단하다. <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
URL.revokeObjectURL() 정적 메서드는 이전에 URL.createObjectURL()을 통해 생성한 객체 URL을 해제합니다.
developer.mozilla.org
https://heropy.blog/2019/02/28/blob/
Blob(블랍) 이해하기
JavaScript에서 Blob(Binary Large Object, 블랍)은 이미지, 사운드, 비디오와 같은 멀티미디어 데이터를 다룰 때 사용할 수 있습니다. 대개 데이터의 크기(Byte) 및 MIME 타입을 알아내거나, 데이터를 송수신
heropy.blog
https://developer.mozilla.org/ko/docs/Web/API/DOMString
DOMString - Web API | MDN
DOMString은 UTF-16 문자열입니다. JavaScript의 String도 UTF-16 문자열이기 때문에 DOMString은 String으로 연결됩니다.
developer.mozilla.org
https://developer.mozilla.org/ko/docs/Web/API/URL/createObjectURL
URL.createObjectURL() - Web API | MDN
URL.createObjectURL() 정적 메서드는 주어진 객체를 가리키는 URL을 DOMString으로 반환합니다.
developer.mozilla.org
'Frontend > Vue js' 카테고리의 다른 글
사용자 브라우저 알아내기 (0) | 2022.03.04 |
---|---|
스타트업 주니어 프론트엔드 개발자의 브라우저 렌더링 최적화2 (0) | 2022.02.28 |
스타트업 주니어 프론트엔드 개발자의 브라우저 렌더링 최적화 (0) | 2021.10.01 |
Vue lazy loading을 활용한 렌더링 최적화 (0) | 2021.09.17 |
prototype을 이용하여 vue router 예외처리 전역으로 하기 (0) | 2021.09.11 |