HTML5로 리소스 다운로드 - a[download]

Eric Bidelman

이제 Chrome에서 a 요소에 HTML 사양의 새 download 속성을 지원합니다. 이 속성을 사용하면 가리키는 리소스를 탐색하는 대신 브라우저에서 다운로드해야 함을 나타냅니다.

리소스 다운로드에서 다음을 수행합니다.

참고: download 속성이 있는 경우 작성자가 하이퍼링크를 리소스 다운로드에 사용하려는 의도를 나타냅니다. 이 속성에는 값이 있을 수 있습니다. 값이 있는 경우 작성자가 로컬 파일 시스템에서 리소스에 라벨을 지정할 때 사용할 것을 권장하는 기본 파일 이름을 지정합니다. 허용되는 값에는 제한이 없지만, 대부분의 파일 시스템은 파일 이름에서 지원되는 구두점에 관한 제한이 있으며 사용자 에이전트가 그에 따라 파일 이름을 조정할 수 있다는 점에 유의해야 합니다. 또한 이 속성에 값을 지정하여 사용자 에이전트가 파일 시스템에 리소스를 저장할 때 사용할 파일 이름을 지정할 수 있습니다. 이 값은 Content-Disposition HTTP 헤더의 filename 매개변수로 재정의할 수 있습니다.

예를 들어 다음 링크를 클릭하면 href 값(download me)로 이동하는 대신 .png가 'MyGoogleLogo.png'로 다운로드됩니다. 마크업은 다음과 같습니다.

<a href="http://web-central.appspot.com/.../web-fundamentals-icon192x192.png" download="WebfundamentalsLogo">download me</a>

a[download]의 진정한 이점은 blob: URL 및 filesystem: URL URL을 사용할 때 나타납니다. 이를 통해 사용자는 앱 내에서 생성/수정된 콘텐츠를 다운로드할 수 있습니다.

전체 데모

위 예시에서 이미지는 웹사이트와 관련하여 동일한 출처를 갖습니다. 다른 출처의 이미지 링크를 사용하려고 하면 링크가 다운로드 링크가 아닌 탐색 링크로 작동하지 않을 수 있습니다. 이는 많은 버전의 브라우저에서 교차 출처 파일의 다운로드 정책을 지원하지 않기 때문입니다. 예를 들어 Chrome 버전 65 이전에는 교차 출처 파일 다운로드가 허용되었지만 이후 버전에서는 지원 중단되었습니다. 자세한 내용은 여기를 참고하세요. Content-Disposition 헤더를 사용하여 다른 출처에서 강제로 다운로드할 수 있습니다.

브라우저 지원: 현재 Chrome 개발자 채널 출시 (14.0.835.15 이상)만 이 속성을 지원합니다.