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

Eric Bidelman

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

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

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

예를 들어 다음 링크를 클릭하면 .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 이상)에서만 이 속성을 지원합니다.