자바스크립트를 사용한 파일 다운로드 방법은 여러 가지가 있습니다.
가장 일반적인 시나리오는 브라우저에서 파일을 생성하고 사용자에게 다운로드하도록 유도하는 방법입니다.
브라우저 상에서 자바스크립트를 이용해 특정 데이터를 파일로 만들고 사용자가 다운로드 하도록 하는 것 입니다.
Table of Contents
텍스트 파일 다운로드
const text = "Hello, this is a file created by JavaScript!";
const blob = new Blob([text], { type: "text/plain" });
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = "example.txt";
a.click();
URL.revokeObjectURL(url);위의 예제 코드를 실행하면 example.txt 파일이 바로 다운로드될 것 입니다.
특정 버튼을 클릭한 경우 다운로드를 진행하고 싶을 때는 뒤에 설명할 addEventListener() 메소드를 사용하면 됩니다.
아니면 그냥 a 요소를 DOM 트리에 추가하여 사용자가 스스로 클릭하도록 할 수도 있습니다.
코드 설명:
- 먼저 text 변수에 파일로 저장하고 싶은 문자열을 지정합니다.
- blob 변수에는 원하는 문자열과 타입을 지정해 Blob 객체를 새로 생성합니다.
- 이번 예제에서 지정한 타입은 “text/plain”입니다. 이는 일반 문자열을 의미합니다.
- 이렇게 생성한 Blob을 URL.createObjectURL() 메소드를 사용해 url의 형태로 만듭니다.
- url을 만들었으니 이를 클릭하면 바로 접근 가능하도록 a(anchor) 태그를 가진 요소를 생성합니다.
- a 요소의 href에 url을 연결하고, download 속성에 파일명 “example.txt”를 지정합니다.
- 마지막으로 click() 메소드를 코드로 실행하여 바로 다운로드를 진행하도록 했습니다.
- 메모리 관리를 위해 URL.revokeObjectURL() 메소드를 사용할 수도 있습니다.
JSON 파일 다운로드
const data = { name: "홍길동", age: 30 };
const json = JSON.stringify(data, null, 2);
const blob = new Blob([json], { type: "application/json" });
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = "data.json";
a.click();
URL.revokeObjectURL(url);JSON 파일을 다운로드하는 방법은 기본적으로 텍스트 파일 방법과 거의 비슷합니다.
한 가지 다른 점은 JSON.stringify() 메소드를 사용해 JSON 객체를 텍스트로 변환하는 과정이 추가로 필요합니다.
그리고 Blob 객체를 생성할 때 타입을 “application/json”으로 설정하는 정도 입니다.
canvas를 PNG로 다운로드
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "lightblue";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "darkblue";
ctx.font = "24px Arial";
ctx.fillText("Hello Canvas!", 50, 80);
canvas.toBlob(function (blob) {
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = "canvas-image.png";
a.click();
URL.revokeObjectURL(url);
}, "image/png");캔버스에 그린 이미지를 PNG로 받는 방법은 이전 예제보다 조금 복잡합니다.
먼저 canvas.getContext(“2d”) 메소드를 통해 캔버스 컨텍스트를 얻어 그림을 그린 후 canvas.toBlob() 메소드를 사용해야 합니다.
canvas.toBlob() 메소드는 콜백 함수와 이미지 타입을 매개변수로 받는데 이 콜백 함수는 캔버스의 이미지 정보를 가지는 Blob 객체를 전달합니다.
이미지 타입으로는 “image/png”를 설정하면 됩니다.
이제 파일을 저장하려면 콜백 함수에서 받은 Blob 객체로 url 객체를 만들어서 a 요소에 설정한 수 click() 메소드를 실행하면 됩니다.
버튼 클릭 시 파일 다운로드
<html lang="ko">
<body>
<h2>파일 다운로드</h2>
<button onclick="downloadTextFile()">다운로드</button>
<script>
function downloadTextFile() {
const content = "안녕하세요! 이 파일은 자바스크립트로 생성되었습니다.";
const blob = new Blob([content], { type: "text/plain" });
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = "example.txt";
a.click();
URL.revokeObjectURL(url);
}
</script>
</body>
</html>
앞선 예제와는 다르게 이번 코드를 실행하면 파일을 바로 다운로드하지 않습니다.
왜냐하면 사용자가 버튼을 클릭했을 때 기능이 동작하도록 onclick 속성에 함수를 연결했기 때문입니다.