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

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

리소스 다운로드에서 다음 단계를 따르세요.

예를 들어 다음 링크를 클릭하면 .png가 'MyGoogleLogo.png'로 다운로드됩니다. href 값으로 이동하는 대신 다운로드를 사용하세요. 이를 위한 마크업은 다음과 같습니다.

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

a[download]의 진정한 이점은 blob: URL파일 시스템: URL URL을 사용할 때입니다. 이를 통해 사용자는 앱 내에서 생성/수정한 콘텐츠를 다운로드할 수 있습니다.

전체 데모

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

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