JavaScript를 사용하여 파일 다운로드
-
HTML의
download속성을 사용하여 파일 다운로드 - 사용자 정의 작성 함수를 사용하여 JavaScript에서 텍스트 파일 생성 및 다운로드
-
Axios라이브러리를 사용하여 파일 다운로드
이 기사에서는 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는 이에 크게 의존합니다.
Harshit Jindal has done his Bachelors in Computer Science Engineering(2021) from DTU. He has always been a problem solver and now turned that into his profession. Currently working at M365 Cloud Security team(Torus) on Cloud Security Services and Datacenter Buildout Automation.
LinkedIn