HTML - 파일 다운로드

다운로드 링크를 만들고 싶을 때는 a 태그에 download 속성을 추가해 주면 다운로드로 사용할 수 있습니다. 링크를 클릭하면 페이지 이동을 하는 게 보통이지만 download 속성이 추가된 링크는 href 에 지정된 파일 이름으로 다운로드합니다.

텍스트 파일이나 이미지 파일을 브라우저에 보여주지 않고 파일로 저장할 수 있으며 DataURL 로 지정된 데이터도 파일로 다운로드하게 합니다.

<a href="sample.html" download="example.txt">파일 다운로드</a>

<a href='sample.jpg' download='example.png'>이미지 다운로드</a>

이 경우 링크를 클릭하면 sample.html 파일을 example.txt 파일로 다운로드하고, 이미지 sample.jpg 를 example.png 로 다운로드합니다.

아래의 경우는 현재 페이지 HTML 코드 전체를 example.html 로 다운로드 합니다.

<a href="#" download="example.html">현재 페이지 다운로드</a>

다만 아래 파일은 실제로 존재하지 않는 파일이기 때문에 파일을 다운로드하지 못합니다. 따라서 아무런 반응을 보이지 않습니다.

<a href="abcdefg" download="example.txt">파일 다운로드</a>

다음은 DataURL 에 대한 예제입니다. href 에 파일 이름 대신 문자열을 적어주면 sample.txt 파일로 저장할 수 있습니다.

<a href='data:application/text;charset=utf-8,안녕 하보니'
                    download="sample.txt">데이터 다운로드</a>

위의 경우 공백이 들어가 있기 때문에 공백이 제거되어 저장됩니다. 예를 들어 '안녕 하보니'라는 문자열을 '안녕하보니'로 저장합니다.

아래는 데이터 형식의 이미지를 sample.png 이미지로 저장하는 예제입니다.

<a href='data:image/png;base64,iVBORw0KGgoAAAAN...'
                    download="sample.png">이미지 다운로드</a>

동일 출처 URL

download 속성은 링크로 이동하는 대신 사용자에게 URL을 저장할지를 묻습니다. 값을 지정할 수 있고 지정하지 않아도 됩니다.

값을 생략하면 파일 이름과 확장자는 브라우저에 의해 다양한 인자로부터 생성하게 됩니다.

• Content-Disposition HTTP 헤더
• URL 경로의 마지막 파일 이름과 확장자
• 미디어 유형(Mime-Type)
  Content-Type 헤더, data: URL의 시작 부분, blob: URL의 Blob.type 등

값을 지정하면 저장할 때의 파일 이름으로서 저장합니다. 파일 이름에 /와 \ 문자는 _로 변환합니다. 

download 속성은 “동일 출처 URL”과 “blob:...”, “data:...” 형식에서만 작동합니다. 

Content-Disposition의 filename 이 download 와 다를 땐 헤더가 우선권을 가집니다. (Content-Disposition: inline일 때, Firefox는 헤더를 우선하고 Chrome은 download를 우선합니다.)

동일 출처 URL이란 웹 페이지 URL과 파일이 위치하는 URL이 모두 같아야 동일한 출처라고 말합니다. 프로토콜, 포트, 호스트도 같아야 합니다.

아래는 https://www.habonyphp.com/page.html 에서 이미지 파일을 다운로드 받을 때 비교 예제입니다.

<!-- 프로토콜이 다르므로 실패 -->
<a href="http://www.habonyphp.com/image.png" download>다운로드</a> 

<!-- 포트가 다르므로 실패
  http:// 포트는 기본값이 80입니다. -->
<a href="http://www.habonyphp.com:81/image.png" download>다운로드</a>

<!-- 호스트가 다르므로 실패 -->
<a href="https://image.habonyphp.com/image.png" download>다운로드</a>

<!-- 경로만 다르므로 성공 -->
<a href="https://www.habonyphp.com/data/image.png" download>다운로드</a>

<!-- 경로만 다르므로 성공 -->
<a href="https://www.habonyphp.com/data/2021-05/image.png" download>다운로드</a>