HTML5에 추가된 속성 중 <a> 태그에만 추가된 download라는 속성이 있다.
브라우저는 <a> 태그에 download 속성이 설정되어 있으면 링크가 가리키는 파일을 다운로드한다. 즉, 마치 링크 위에서 마우스 오른쪽 버튼을 클릭하고 "다른 이름으로 링크 저장"을 실행하는 것과 같다.
HTML5가 도입되면서 웹 브라우저에서도 바이너리 콘텐츠를 생산하는 경우가 많아졌는데(이미지 편집, 사운드 편집, Blob 등) 이를 사용자가 다운로드하려면 일단 서버로 보낸 뒤 서버가 전송해주는 비효율적인 방법을 사용하거나 사용자가 링크 위에서 문맥 메뉴(context menu)를 사용해 링크의 내용을 다운로드 받도록 해야 한다. 하지만 download 속성을 두면 링크를 무조건 다운로드 받도록 만들 수 있다. 다음 예제를 보자.
<a href="원하는_주소" download>download 속성 예제</a>오른쪽 링크를 클릭해보자 : download 속성 예제
download 속성에는 파일 이름으로 사용할 문자열을 입력할 수도 있다. 이 기능은 앞서 살펴본 Blob URL나 Data URI와 함께 사용하면 사용자가 콘텐츠를 파일로 다운로드 받을 때 원하는 이름을 정해줄 수 있어 유용하다. 다음은 Blob URL에서 사용한 예제를 조금 수정하여 파일을 다운로드 받도록 만든 예제이다.
추가 - 2020.06.12. // 처음 소개되었을 때는 모든 주소에 download 속성을 적용할 수 있었지만 현재 이 속성은 현재 문서와 동일한 출처의 URL에만 적용된다.
명세에 따르면 서버에 있는 일반적인 파일도 download 속성에서 정의한 이름으로 저장이 되어야 하는데, 실제로 사용해 본 결과 이름이 바뀌지 않거나 브라우저에 따라 동작이 달랐다. 따라서 일반적인 파일에 사용할 때는 대상 브라우저에서 확인한 후 사용해야 할 것이다. 다음은 브라우저의 동작을 확인해 볼 수 있는 몇 가지 예제이다.
2020년 6월 현재 IE와 Opera Mini를 제외한 거의 모든 주요 웹 브라우저에서 이 속성을 지원한다. 참고 CanIUse.com
파폭 35 에서 해봤는데 안되네요. 아직까진 크롬만 지원하는 것 같습니다 흑
동작이 달라서 그런데 Firefox도 지원하는게 맞습니다.
다만, Firefox는 브라우저에서 표현할 수 있는 형식이면(HTML, 이미지 등) 그냥 브라우저에서 열어버리더라고요. ^^
크롬 사용중인데 저도 동일하게 이름이 안맞네요...
해결하는방법없을까요...?
이름이 안 맞다는 게 어떤 의미인지 정확하게 말씀해주실 수 있을까요?
이왕이면 사용하셨던 코드 예제까지 있으면 더 도움이 됩니다.
다운로드
예문으로 올리신 이미지파일 다운로드랑 동일한경우요
hostname이 동일하면 정상작동하는거같은데 다른경우 다운로드속성에 부여한이름과 다르게나오네요
이미지파일 저장하려고하는데.. 파일명을 지정하기가 어렵네요... 다른방법이없을까요??
스펙에는 있는데 브라우저에서 구현이 안되는 거라 HTML만으로는 어려울 것 같습니다.
모바일에서 사용시 파일을 갤러리로 지정할 수 있는 방법은 없을까요?
모바일에서는 다운이 안되는데 모바일에서는 어케하면 다운 받을 수 있을까요?
IE 에서 돌아가던 파일 다운로드를 크롬에서 돌릴려니 잘 몰랐는데 download 속성으로 하니까 되는 군요!!! 감사합니다아~!~!~!~!~!