intro
참고 블로그 : Blob(블랍) 이해하기
자바스크립트는 Blob이라는 객체를 제공한다. 이 객체의 역할은 javascript에서 텍스트, 이미지, 사운드, 비디오와 같은 멀티미디어 데이터를 다룰 때 사용한다. 참고 블로그에서는 다양한 형식의 데이터에 대해 Blob객체로 만드는 방법에 대해 설명하고 있지만 이 글에서는 Blob을 활용해 파일을 다운로드 하는 방법에 대해 포스팅하고자 한다.
사용자 게시글 마크다운 다운로드 기능 구현하기
아이콘에 이벤트 걸어주기
<i
class="fas fa-file-download"
style="cursor: pointer; color : gray"
@click="downloadFile"
></i>다음과 같이 클릭 시 파일 다운로드 로직이 실행되는 이벤트를 걸어준다.
다운로드 구현하기
method 소스코드
downloadFile() {
const blob = new Blob([this.content], {type: 'text/plain'})
const url = window.URL.createObjectURL(blob)
const a = document.createElement("a")
a.href = url
a.download = `${this.$store.state.nickname}_${this.title}.md`
a.click()
a.remove()
window.URL.revokeObjectURL(url);
},1. 블랍 객체 생성하기
Blob 객체는 생성자로 파일로 만들고자 하는 것과 그것의 타입 두가지를 받는다. 따라서 js에서 활용할 수 있도록 게시글의 내용을 텍스트 형식으로 객체를 생성한다.
2. 다운로드 url 만들기
Blob 객체를 나타내는 URL를 포함한 다음과 같은 DOMString를 생성한다. Blob URL은 생성된 window의 document에서만(브라우저) 유효하기 때문에 다른 브라우저에서는 활용할 수 없다.
3. a 태그와 속성을 생성하기
생성하는 태그는 DOM에 붙는 태그가 아닌, 다운로드 기능만을 수행하기 위해 만든다. 따라서 링크, 다운로드 속성을 만드는데 다운로드 속성의 innerText는 자유롭게 작성해도 된다. 다만 파일의 확장자는 제대로 만들어야 제대로된 파일이 만들어져 다운로드 기능을 제공할 수 있다. 해당 포스트에서는 TIL 블로그의 취지에 맞게 작성 게시글을 마크다운(.md)으로 다운로드 기능을 제공하려 한다.
이후 클릭 이벤트를 걸어줌으로서 생성된 a태그가 동작하고 실제 다운로드가 수행된다.
4. 태그 및 url 삭제하기
URL.revokeObjectURL()은 URL.createObjectURL()을 통해 생성한 기존 URL을 해제(폐기)한다.
revokeObjectURL을 통해 해제하지 않으면 기존 URL를 유효하다고 판단하고 자바스크립트 엔진에서 가비지콜렉터가 동작하지 않는다. 따라서 메모리 누수를 방지하기 위해 생성된 URL을 DOM과 바인딩한 후에는 해제하면 로직이 완료된다.
