프로그래밍언어/Html & Css

HTML, A tag download 속성이 적용되지 않는 문제

D.Y 2022. 2. 18. 17:32
반응형

 

안녕하세요, 

오늘은 HTML 태그 중 A tag의 download 속성을 사용해 파일을 다운로드할때 발생하는 문제에 대해서 알아보겠습니다.

 

상황

  • AWS에 업로드된 파일의 URL을 a tag의 download 속성을 이용하여 다운로드 하고자 한다.
  • 그런데, AWS의 올라간 파일명과 다르게 다운로드 되도록하고자 한다.
  • a tag의 download 속성을 사용하여 filename을 명시해주었다.
    <a
  href="https://test.com/filename.txt"
  download="example.txt"
>
	다운로드
</a>​

문제

  • a tag의 download 속성에 설정한 filename이 적용되지 않았다.

 

원인

  • 확인해보니 a tag의 download 속성은 두 가지 조건이 충족되어야했다.
    • Same Origin URL (동일 출처)
    • blob, data schemes 에서만 작동

 

해결방안

  • http header에 Content-Disposition 속성에 파일명을 설정해줄 수 있는데, download에 적용된 파일명과 다를땐 헤더값이 우선되기 때문에 Content-Disposition 속성에 파일명을 설정하였습니다.
    Content-Disposition: attachment; filename="example.txt"

 

결과

 

참조

 

 

반응형