HTML5로 리소스 다운로드 - a[download]
컬렉션을 사용해 정리하기
내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.
이제 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 이상)에서만 이 속성을 지원합니다.
달리 명시되지 않는 한 이 페이지의 콘텐츠에는 Creative Commons Attribution 4.0 라이선스 에 따라 라이선스가 부여되며, 코드 샘플에는 Apache 2.0 라이선스 에 따라 라이선스가 부여됩니다. 자세한 내용은 Google Developers 사이트 정책 을 참조하세요. 자바는 Oracle 및/또는 Oracle 계열사의 등록 상표입니다.
최종 업데이트: 2011-08-01(UTC)
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"필요한 정보가 없음"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"너무 복잡함/단계 수가 너무 많음"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"오래됨"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"번역 문제"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"샘플/코드 문제"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"기타"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"이해하기 쉬움"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"문제가 해결됨"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"기타"
}]
{"lastModified": "\ucd5c\uc885 \uc5c5\ub370\uc774\ud2b8: 2011-08-01(UTC)"}
[[["이해하기 쉬움","easyToUnderstand","thumb-up"],["문제가 해결됨","solvedMyProblem","thumb-up"],["기타","otherUp","thumb-up"]],[["필요한 정보가 없음","missingTheInformationINeed","thumb-down"],["너무 복잡함/단계 수가 너무 많음","tooComplicatedTooManySteps","thumb-down"],["오래됨","outOfDate","thumb-down"],["번역 문제","translationIssue","thumb-down"],["샘플/코드 문제","samplesCodeIssue","thumb-down"],["기타","otherDown","thumb-down"]],["최종 업데이트: 2011-08-01(UTC)"],[],[]]