[HTML5] A 태그의 download 속성

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

  1. 파폭 35 에서 해봤는데 안되네요. 아직까진 크롬만 지원하는 것 같습니다 흑

    1. 동작이 달라서 그런데 Firefox도 지원하는게 맞습니다.
      다만, Firefox는 브라우저에서 표현할 수 있는 형식이면(HTML, 이미지 등) 그냥 브라우저에서 열어버리더라고요. ^^

  2. 크롬 사용중인데 저도 동일하게 이름이 안맞네요...
    해결하는방법없을까요...?

    1. 이름이 안 맞다는 게 어떤 의미인지 정확하게 말씀해주실 수 있을까요?
      이왕이면 사용하셨던 코드 예제까지 있으면 더 도움이 됩니다.

      1. 다운로드

        예문으로 올리신 이미지파일 다운로드랑 동일한경우요
        hostname이 동일하면 정상작동하는거같은데 다른경우 다운로드속성에 부여한이름과 다르게나오네요
        이미지파일 저장하려고하는데.. 파일명을 지정하기가 어렵네요... 다른방법이없을까요??

      2. 스펙에는 있는데 브라우저에서 구현이 안되는 거라 HTML만으로는 어려울 것 같습니다.

  3. 모바일에서는 다운이 안되는데 모바일에서는 어케하면 다운 받을 수 있을까요?

  4. IE 에서 돌아가던 파일 다운로드를 크롬에서 돌릴려니 잘 몰랐는데 download 속성으로 하니까 되는 군요!!! 감사합니다아~!~!~!~!~!

댓글을 남겨주세요

This site uses Akismet to reduce spam. Learn how your comment data is processed.