이미지 파일의 경우 링크로 해서 다운로드를 하게 하고 싶은 경우가 있을 겁니다...

이것 때문에 nginx에서 헤더를 추가해보기도 하고 각종 삽질을 해봤지만..

가장 확실한 방법은 링크에 download 속성을 추가하는 것입니다..!


이 방법으로 제가 테스트 했을 때, 크롬, 파이어폭스 등에서 문제 없이 다운로드 창을 호출 했습니다.


예를 들어

<a href="~~~~~~`/test.png">download</a> 이라면

<a href="~~~~~~`/test.png" download>download</a>


이게 웹표준 인건지는 모르겠지만.. 아무튼 저런 속성이 있다는 것도 처음 알았네요....

하늘희

profile
てててててて
  • profile

    좀 더 찾아봤는데 HTML5에 새로 추가된 속성이네요~! 

     

    IE와 사파리를 제외하고 지원하는 것 같습니다. ( IE는 원래 이미지는 다운로드 창이 뜨니 뭐..)

     

     

    Element            
    download 14.0 13.0 Not supported 20.0 Not supported 15.0

     

    http://www.w3schools.com/tags/att_a_download.asp 

     

     

     

    <a href="/images/myw3schoolsimage.jpg" download="w3logo">

     

    위와 같이 download 속성에 값을 입력할 경우 다운로드시 파일의 이름을 지정할 수 있습니다.!

     

    우와!! 짱이네요!! ㄷㄷㄷ

     

    바로 적용했습니다.! 단순히 download 추가만 하는 게 아니라 직접 이름을 지정할 수 있다니..!

     

    참고로 .(콤마) 가 있을 경우 확장자도 바꿔버리네요...

     

    만일 파일이름에 .(콤마)를 넣어야 한다면 확장자까지 download에 넣어주시면 됩니다

     

    예) download="xetown.com - 이미지.jpg"

  • ?
    확실히 HTML5는 공부해야 할거 같아요 ㅎㅎ
    새로운 것들이 많네요
  • ? profile
    더욱 편리한 속성이 많아졌어요! 모든 브라우저가 HTML5를 지원해야하는데! 사실 지원하고 있지만, 구닥다리 IE가 문제죠..ㅠㅠ OS 종속 브라우저가 이래서 안좋습니다..........
  • profile ?
    한 5년 지나면 나아질거 같아요 ㅎㅎ
    5년 전엔 IE6가 문제였는데 그거 보단 나아졌지요☺
  • profile
    모바일에선 스크랩이 안 되는군요 (처음 알았네 힝)
    좋은 정보 추천 누르고 갑니다 ^^
  • profile
    아무리 좋아도 우리나라의 IE점유율 때문에 쓸 수 없는게 참.... 그렇네요....
  • profile profile
    IE는 기존 처럼... PHP나 서버쪽으로.......................
  • profile
    NOT SUPPORTED.