※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다.
Blob이란?
Blob이란 Binary Large Object의 약어로, 단순히 이진 데이터 덩어리를 표현한 것이다.
Blob(데이터의 배열, 파일의 종류（MIME타입）)
데이터의 배열 (첫 번째 인수)
첫 번째인수에는 Blob으로 변환할 데이터의 배열을 전달한다.
파일의 종류 (MIME 타입, 두 번째 인수)
두 번째인수에는 데이터의 종류를 문자열의 MIME 타입으로 지정한다. MIME 타입에 대해는 이 사이트에 가장 잘 나와있으므로 참고하길 바란다.
예를 들면, 다음과 같은 것을 지정한다.
- text/plain
- application/json
텍스트 파일을 Blob으로 다운로드 시키기
Blob을 사용하면 유저가 동적으로 파일을 다운로드 할 수 있도록 할 수 있다. 다운로드된 데이터를 Blob으로 변환하여 링크를 작성한다. 유저가 이 링크를 클릭하면 Blob의 데이터를 다운로드 하는 이미지를 떠올리면 된다.
간단한 예시는 다음과 같다.
<html>
<head></head>
<body>
</body>
<script>
// 다운로드 시키고 싶은 데이터를 작성
const blob = new Blob(['한국의 여름은 덥다'], { type: 'text/plain' })
// 다운로드 링크를 작성
let link = document.createElement('a') // 링크를 생성
link.href = URL.createObjectURL(blob) // URL를 작성
link.download = '한국의 여름은 덥다.txt' // 파일명
link.innerText = '다운로드 하기' // 링크 표시 텍스트
// 링크를 body에 추가
document.body.appendChild(link)
</script>
</html>
URL.createObjectURL
URL.createObjectURL은 인수의 오브젝트를 이용해서 URL를 생성한다. 이때 오브젝트는 Blob 혹은 File이다. 생성된 URL은 현재의 document에 엮여져있어 이 document가 유효할 때 URL를 클릭하면 그 오브젝트를 다운로드하는게 가능해진다.
이 URL를 개방하기 위해서는 revokeObjectURL를 사용한다. 즉 위 코드는 작성된 링크의 href에 오브젝트를 다운로드 할 수 있는 URL를 지정하는 것이다.
Blob에서 데이터를 읽어 들이기
Blob에서 데이터를 읽어들이기 위해서는 FileReader를 사용한다. FileReader의 readAsText 메소드로 Blob의 읽어들이기는 시작해, onload로 읽어들이기가 완료됐을 때 내용을출력한다.
<html>
<head>
<script>
// Blob를 생성
const blob = new Blob(['오늘은 맑음'], { type: 'text/plain' })
// Blob에서 데이터를 읽어들이기
const reader = new FileReader()
reader.onload = () => {
// 읽어들이기가 끝나면 결과를 출력
console.log(reader.result)
}
// 읽어들이기 시작
reader.readAsText(blob)
</script>
</head>
<body>
</body>
</html>
JSON 문자열을 Blob으로 만들기
오브젝트를 문자열로 하여, 그 문자열을 Blob에 저장하는 것이 가능하다.
<html>
<head>
<script>
// 오브젝트를 작성
const obj = {
name: 'Taro',
age: 72,
}
// 오브젝트를 시리얼라이즈
const strObj = JSON.stringify(obj)
// 시리얼라이즈한 오브젝트를 Blob으로 작성
const blob = new Blob([strObj], { type: 'application/json' })
// Blob에서 데이터를 읽어들이기
const reader = new FileReader()
reader.onload = () => {
console.log(reader.result)
}
reader.readAsText(blob)
</script>
</head>
<body>
</body>
</html>참고자료
'IT > 언어' 카테고리의 다른 글
| [Vue3] Suspense 기능의 간략한 사용법 (0) | 2023.08.15 |
|---|---|
| [Java] 정규표현 (0) | 2023.07.26 |
| [Junit] static 메소드의 Mock화 (0) | 2023.07.11 |
| [Junit] private 메소드 테스트하는 방법 (0) | 2023.05.31 |
| [Java] String.format 사용법 (0) | 2023.05.30 |