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

에릭 비델만

이제 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 및 파일 시스템: URL URL로 작업할 때입니다. 이를 통해 사용자는 앱 내에서 생성/수정된 콘텐츠를 다운로드할 수 있습니다.

전체 데모

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

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