HTML DOM의 download 속성은 링크(<a> 태그)의 download 속성 값을 설정하거나 반환하는 데 사용됩니다. 이 속성을 활용하면 자바스크립트를 통해 다운로드 파일의 이름을 동적으로 변경하거나 현재 설정된 값을 확인할 수 있습니다.
download 속성 설정 문법
download 속성 값을 설정하려면 아래와 같은 문법을 사용합니다.
anchorObject.download = file여기서 file은 다운로드될 파일에 지정하고자 하는 파일명을 의미합니다. 실제 파일 확장자는 브라우저가 자동으로 붙여주므로, 파일명만 지정하면 됩니다.
download 속성 반환 문법
현재 설정된 download 속성 값을 가져오려면 다음과 같이 작성합니다.
anchorObject.download예제 코드
아래 예제는 DOM 앵커의 download 속성을 실제로 구현한 것입니다. 이미지 링크에 download 속성을 지정하고, 버튼을 클릭하면 해당 값을 화면에 표시합니다.
<!DOCTYPE html>
<html>
<body>
<h2>ReactJS</h2>
<a id="myid" href="https://www.tutorialspoint.com/images/reactjs.png" download="Learn
ReactJS">
<img src="https://www.tutorialspoint.com/images/reactjs.png" alt="ReactJS" width="200"
height="200"></a>
<button onclick="display()">값 표시하기</button>
<p id="demo"></p>
<script>
function display() {
var val = document.getElementById("myid").download;
document.getElementById("demo").innerHTML = val;
}
</script>
</body>
</html>실행 결과
위 코드를 실행하면 ReactJS 이미지가 다운로드 링크로 표시됩니다.
이후 “값 표시하기” 버튼을 클릭하면, <a> 태그에 설정된 download 속성 값인 Learn ReactJS가 화면에 출력되는 것을 확인할 수 있습니다.
핵심 포인트
- download 속성은 <a> 태그(앵커 요소)에서만 사용할 수 있습니다.
- 값을 설정하면 파일이 해당 이름으로 저장되며, 원본 확장자는 자동으로 유지됩니다.
- 같은 출처(same-origin)의 리소스에 대해서만 download 속성이 정상적으로 작동합니다.