HOWTO · JavaScript
JavaScript를 사용하여 파일 다운로드
이 튜토리얼에서는 JavaScript를 사용하여 파일을 다운로드하는 방법을 설명합니다.
이 기사에서는 JavaScript를 사용하여 파일을 다운로드하는 방법을 배웁니다. 자동 다운로드 파일을 사용하면 서버에 연결하지 않고도 JavaScript 기능을 사용하여 URL에서 직접 파일을 검색 할 수 있습니다. 사용자 정의 작성된 함수와 HTML 5의 다운로드 속성을 사용하여이를 달성 할 것입니다.
HTML의download속성을 사용하여 파일 다운로드
HTML 5의download속성은 사용자가 하이퍼 링크를 클릭 할 때 파일을 다운로드하는 데 사용됩니다. 앵커 태그-<a>및<area>와 함께 사용됩니다. 파일 소스를 지정하는href속성을 설정해야합니다. download속성 값은 다운로드 된 파일의 이름을 결정합니다. 이 값을 제거하면 다운로드 한 파일 이름이 원래 파일 이름과 동일합니다.
<!DOCTYPE html>
<html>
<head>
<title>How to Download files Using JavaScript </title>
</head>
<body>
<a href="apple.png" download="apple">
<button type="button">Download</button>
</a>
</body>
</html>
위의 코드에서download속성을 사용하여apple.png이미지를 다운로드합니다. 먼저 이미지 주소가 포함 된 앵커 태그를 만들고 여기에download속성을 추가합니다. 그런 다음 파일 다운로드를 용이하게하는 다운로드 버튼도 만들었습니다.
사용자 정의 작성 함수를 사용하여 JavaScript에서 텍스트 파일 생성 및 다운로드
이 접근 방식은 즉석에서 텍스트 데이터를 만든 다음 JavaScript를 사용하여 텍스트 파일을 만든 다음 다운로드합니다.
알고리즘 다운로드
-
텍스트 데이터를 입력 할 텍스트 영역을 만듭니다.
-
createElement속성을 사용하여<a>앵커 태그를 만들고 여기에download및href속성을 할당합니다. -
encodeURIComponent를 사용하여 텍스트를 인코딩하고 구성 요소로 URI에 추가합니다. 이렇게하면 특정 특수 문자를 이스케이프 시퀀스 조합으로 대체하는 데 도움이됩니다. -
날짜 유형을
text/plain으로 설정하고data:text/plain; charset = utf-8을href의 속성 값으로 사용합니다. -
생성 된 요소를 문서 (HTML 페이지) 본문에 추가합니다.
-
element.click()을 사용하여 마우스 클릭을 시뮬레이션합니다. -
문서 본문 (HTML 페이지)에서 요소를 제거합니다.
클릭을 찾는 이벤트 리스너를 다운로드 버튼에 연결합니다. 텍스트 영역의 텍스트와 텍스트 파일의 파일 이름을 매개 변수로 사용하여 다운로드 함수를 호출합니다.
<!DOCTYPE html>
<html>
<head>
<title>
How to Download files Using JavaScript
</title>
</head>
<body>
<textarea id="text">DelftStack</textarea>
<br />
<input type="button" id="btn" value="Download" />
<script>
function download(filename, textInput) {
var element = document.createElement('a');
element.setAttribute('href','data:text/plain;charset=utf-8, ' + encodeURIComponent(textInput));
element.setAttribute('download', filename);
document.body.appendChild(element);
element.click();
//document.body.removeChild(element);
}
document.getElementById("btn")
.addEventListener("click", function () {
var text = document.getElementById("text").value;
var filename = "output.txt";
download(filename, text);
}, false);
</script>
</body>
</html>
Axios라이브러리를 사용하여 파일 다운로드
이 접근 방식에서는Axios라이브러리를 사용하여 파일을 다운로드합니다. 접근 방식의 세부 사항을 진행하기 전에 Axios를 사용하여 파일을 다운로드하는 데 사용되는 데이터 유형 인Blob이 무엇인지 이해하겠습니다.
Blob
Blob은 Binary Large Object의 약자로 바이너리 데이터를 저장할 수있는 데이터 유형입니다. 프로그램, 코드 조각, 멀티미디어 개체 및 기타 JavaScript 기본 형식을 지원하지 않는 데이터와 같은 데이터를 나타냅니다.
파일 다운로드
-
URL이 파일 소스이고
responseType이blob인 Axiosget요청을 만듭니다. -
다음 단계를 수행하여 Axios 요청에서 반환 된 promise를 해결합니다.
- Blob 객체를 나타내는 URL을 포함하는 DOMString을 만듭니다.
createElement속성을 사용하여<a>앵커 태그를 만들고 여기에download및href속성을 할당합니다.href를 첫 번째 단계에서 생성 한 URL로 설정하고download속성을 다운로드 한 파일의 이름으로 설정합니다.- 이 링크를 문서에 첨부하고
.click()메소드를 사용하여 클릭을 시뮬레이션합니다. - 문서에서이 링크를 제거합니다.
<!DOCTYPE html>
<html>
<head>
<title>How to download files using JavaScript</title>
</head>
<body>
<button onclick="download()">
Download Image
</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js">
</script>
<script>
function download() {
axios({
url: 'https://source.unsplash.com/random/500x500',
method: 'GET',
responseType: 'blob'
})
.then((response) => {
const url = window.URL
.createObjectURL(new Blob([response.data]));
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', 'image.jpg');
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
})
}
</script>
</body>
</html>
여기서 우리는 사이트에서 임의의 이미지를 가져오고Axios를 사용하여 해당 이미지를 blob 형식으로 요청한 다음 앵커 태그의download속성을 사용하여 다운로드합니다. 이 방법은 이전 방법과 같이 사용자가 입력 한 일반 텍스트로 제한되지 않습니다. API에서 모든 종류의 데이터를 요청한 다음이 접근 방식을 사용하여 컴퓨터 내부에 데이터를 저장할 수 있습니다.
모든 주요 브라우저는Axios라이브러리를 사용하는 방법을 제외하고 위의 모든 방법을 지원합니다. Internet Explorer는 여전히 기본 ES6 약속을 지원하지 않으며 Axios는 이에 크게 의존합니다.
