[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에서 사용한 예제를 조금 수정하여 파일을 다운로드 받도록 만든 예제이다.
[jsfiddle url=”http://jsfiddle.net/21wa4rzf/2/” height=”300px” include=”result,html,js”]

명세에 따르면 서버에 있는 일반적인 파일도 download 속성에서 정의한 이름으로 저장이 되어야 하는데, 실제로 사용해 본 결과 이름이 바뀌지 않거나 브라우저에 따라 동작이 달랐다. 따라서 일반적인 파일에 사용할 때는 대상 브라우저에서 확인한 후 사용해야 할 것이다. 다음은 브라우저의 동작을 확인해 볼 수 있는 몇 가지 예제이다.

지원하는 브라우저는 크롬 14+, 파이어폭스 20+이고 일부 모바일 브라우저도 지원하지만 아이폰과 데스크톱용 사파리는 지원하지 않는다. 참고 CanIUse.com

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

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

      1. 다운로드

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

댓글을 남겨주세요