HTML 버튼 또는 JavaScript를 클릭 할 때 파일 다운로드를 트리거하는 방법

434

이것은 미쳤지 만 나는 이것을하는 방법을 모른다. 그리고 단어가 얼마나 흔한 지 때문에 검색 엔진에서 필요한 것을 찾기가 어렵다. 나는 이것이 대답하기 쉬운 것 같아요.

다음과 같은 간단한 파일 다운로드를 원합니다.

<a href="file.doc">Download!</a>

그러나 HTML 버튼을 사용하고 싶습니다 (예 : 다음 중 하나).

<input type="button" value="Download!">
<button>Download!</button>

마찬가지로 JavaScript를 통해 간단한 다운로드를 실행할 수 있습니까?

$("#fileRequest").click(function(){ /* code to download? */ });

나는 확실히하고있어 되지 서버 헤더 또는 MIME 타입과 버튼처럼 보이는, 어떤 백엔드 스크립트를 사용하는 것이 앵커, 또는 혼란을 만들 수있는 방법을 찾고.

javascript html download

— 브렌 토스트 린
소스

15

덕분에 "자바 스크립트에서 파일 다운로드를 트리거하는 방법"은 향후 검색 자에게 훨씬 빠른 답변을 줄 것입니다.

— Danubian Sailor

278

당신이 할 수있는 버튼

<form method="get" action="file.doc">
   <button type="submit">Download!</button>
</form>

— 괴물
소스

양식 태그를 저장하고 버튼 태그에 onclick을 추가하면됩니다.

— Florian Leitgeb

12

트리거로 작동하지 않고 'a'태그로 URL로 리디렉션하십시오.

— fdrv

7

— kscius

11

@kscius 오늘날에도 다운로드 속성은 IE 11에서 지원되지 않으며 (이제 Edge에서 지원됨) Safari에서는 지원되지 않습니다. 답변이 처음 게시 된 2012 년에는 주요 브라우저에서 지원되지 않았습니다.

— Cfreak

1

버튼 스타일이있는 앵커와 버튼이있는 양식의 차이점은 무엇입니까?

— Andrei Epure

444

HTML5 download속성을 사용하여 다운로드를 트리거 할 수 있습니다 .

<a href="path_to_file" download="proposed_file_name">Download</a>

어디:

path_to_file경로가 있음을 URL로 확인 온 같은 기원 . 즉, 페이지와 파일은 동일한 도메인, 하위 도메인, 프로토콜 (HTTP vs. HTTPS) 및 포트 (지정된 경우)를 공유해야합니다. 예외는 blob:와 data:(이 항상 작업) 및 file:(작동하지합니다).
proposed_file_name저장할 파일 이름입니다. 비어 있으면 브라우저는 기본적으로 파일 이름을 사용합니다.

설명서 : MDN , HTML 표준 다운로드 , HTML 표준 켜기download , CanIUse

— 조 피엇
소스

37

Safari 및 특정 IE 버전에서는 작동하지 않음

— Mohamed Hussain

4

의 조합을 사용 download하고 target="_blank"보이는 대부분의 사용 사례를 커버하기에 충분합니다. 이해 download하는 브라우저 는 다운로드로 간주하고 그렇지 않으면 새 탭에서 열립니다.

— MK10

10

태그 대신 버튼 객체에 어떻게 적용 할 수 있습니까?

— storm_m2138

8

실제로 이것은 MDN 문서에 언급 된 것과 동일한 출처의 URL에서만 작동합니다. 일반적인 솔루션을 개발하고자한다면 이것은 큰 한계입니다

— Akshat Gupta

6

이 질문은 링크 대신 버튼을 사용하도록 명시 적으로 요청합니다

— Quentin

86

HTML :

<button type="submit" onclick="window.open('file.doc')">Download!</button>

— 슬리피
소스

8

가장 깨끗한 솔루션. 그러나 여기에 추가 자바 스크립트가 필요하지 않습니다. onclick이있는 HTML 부분이면 충분합니다.

— Florian

4

xml 파일을 다운로드하려면 어떻게합니까?

— g07kore

2

코드 주셔서 감사합니다. 나는 IE, Chrome, Firefox에서 작동 할 수 있다고 테스트했습니다.

— muthukumar

6

PDF와 같이 브라우저에서 허용되는 파일이있는 경우 다운로드 대화 상자를 표시하기 위해 새 탭에서 열립니다.

— WindRider

1

window.open은 브라우저에서 팝업 차단을 트리거 할 수 있으므로 권장하지 않습니다. window.location = 'path'사용할 수는 있지만 동일한 브라우저 창의 위치로 이동합니다.

— Elendurwen

68

jQuery로 :

$("#fileRequest").click(function() {
    // // hope the server sets Content-Disposition: attachment!
    window.location = 'file.doc';
});

— 매트 볼
소스

1

고마워요 대부분의 서버가 기본적으로 Content-Disposition을 '첨부 파일'로 설정하는지 알고 있습니까?

— brentonstrine

5

"가장 많이"없습니다. 그것은 완전히 다릅니다. 설정되는 것에 의존하지 마십시오.

— 매트 볼

3

이 문제는 나를 탄도하게 만들었고, 이것이 유일하게 작동하는 옵션이었습니다 (IE에서 지원합니다). 나 같은 n00bs에 Content-Disposition을 설정하기 위해 추가 할 것이다. <? php header ( 'Content-Disposition : attachment; filename = "filename.here"'); ?>

— user124384

3

jquery가 없습니다. 기간.

— Adam Arold

1

이미지를 다운로드하려고하면 작동하지 않습니다. 브라우저에서 이미지를 열 것입니다

— Dheeraj

34

오래된 스레드이지만 간단한 js 솔루션이 없습니다.

let a = document.createElement('a')
a.href = item.url
a.download = item.url.split('/').pop()
document.body.appendChild(a)
a.click()
document.body.removeChild(a)

— 스테파노 스
소스

24

@NicholasKyriakides이 보석을 생각 나게하는 종류 : image.ibb.co/dtkUWJ/Selection_002.png

— Stefanos Chrs

@BryanLarsen 어떤 버전의 FF?

— Stefanos Chrs

1

@BryanLarsen 당신이 맞습니다. Firefox는 먼저 요소를 본문에 추가하지 않고는 이것을 허용하지 않습니다. 답변을 업데이트 해 주셔서 감사합니다

— Stefanos Chrs

1

다운로드가 완료되면 자바 스크립트 함수가 트리거되는 방법이 있습니까? 다운로드가 시작되면 메시지를 표시하려고 시도하고 다운로드가 완료되면 메시지를 제거하십시오.

— mohit bansal 2014 년

1

@mohitbansal (un) 불행히도 브라우저 레벨에 있지 않습니다

— Stefanos Chrs

23

보이지 않는 iframe과 함께 "트릭"으로 할 수 있습니다. "src"를 설정하면 동일한 "href"가있는 링크를 클릭하는 것처럼 브라우저가 반응합니다. 형식이있는 솔루션과 달리, 일부 조건이 충족 될 때 시간 초과 후 다운로드 활성화와 같은 추가 논리를 포함 할 수 있습니다.

또한 매우 조용 window.open합니다.를 사용할 때와 같이 깜박이는 새 창 / 탭이 없습니다 .

HTML :

<iframe id="invisible" style="display:none;"></iframe>

자바 스크립트 :

function download() {
    var iframe = document.getElementById('invisible');
    iframe.src = "file.doc";
}

— 다 누비안 선원
소스

적어도 iframe을 document.body에 실제로 적용하는 경우에는 가능합니다.

— yxhuvud

1

이전에는 작동했지만 Chrome에서 작동하지 않는 것 같습니다. 다른 버전의 Chrome에서 간헐적으로 작동이 중지되는지 궁금합니다.

— Dobes Vandermeer

버전 61.0.3163.100 (공식 빌드) (64 비트) 기준으로 Chrome에서 작동

— AndrewBenjamin

Firefox v57의 이미지에서는 작동하지 않습니다. iframe에서 이미지를 렌더링합니다.

— Antony

15

부트 스트랩 버전

<a class="btn btn-danger" role="button" href="path_to_file"
   download="proposed_file_name">
  Download
</a>

Bootstrap 4 docs에 문서화 되어 있으며 Bootstrap 3에서도 작동합니다.

— CFP 지원
소스

9

이것이 부트 스트랩과 관련이있는 유일한 것은 클래스 이름입니다 .HTML5의 힘 일뿐입니다.

— Machado

3

문제는 링크 대신 버튼 으로이 작업을 수행하는 방법을 명시 적으로 묻는 것입니다.

— Quentin

2

부트 스트랩에 대해 아는 것이 있으면 버튼이라는 것을 알 수 있습니다.

— John Lord

11

나는 이것이 당신이 찾고있는 해결책이라고 생각합니다.

<button type="submit" onclick="window.location.href='file.doc'">Download!</button>

Javascript가 CSV 파일을 생성 한 경우가있었습니다. 다운로드 할 원격 URL이 없으므로 다음 구현을 사용합니다.

downloadCSV: function(data){
    var MIME_TYPE = "text/csv";

    var blob = new Blob([data], {type: MIME_TYPE});
    window.location.href = window.URL.createObjectURL(blob);
}

— 델코 니스
소스

404-> 페이지에서 404 오류 페이지로 변경하십시오. 다른 location.href솔루션 에 명시된 것과 동일한 문제 .

— BananaAcid

9

이건 어떤가요:

<input type="button" value="Download Now!" onclick="window.location = 'file.doc';">

— olli
소스

5

예를 들어, 파일이 브라우저에서 열리기 때문에 이미지 인 경우에는 작동하지 않습니다.

— Juggernaut

파일이없는 경우 전체 페이지를 404 페이지로 탐색하는 또 다른 문제가 발생합니다.

— Hugheth

7

다운로드 링크를 숨기고 버튼을 클릭하도록 만들 수 있습니다.

<button onclick="document.getElementById('link').click()">Download!</button>
<a id="link" href="file.doc" download hidden></a>

— 스타 워즈
소스

Firefox에서이 기능을 사용하려면 리소스가 문서와 동일한 도메인에 있어야합니다. CORS 헤더를 설정해 도 도움 이 되지 않습니다 .

— Antony

2

이 작업을 수행하지 마십시오

— Wannes

@ 안녕 왜?

— Starwarswii

4

HTML5 속성을 사용하지 않고 바닐라 JavaScript (jQuery 없음) 솔루션을 찾고 있다면 이것을 시도 할 수 있습니다.

const download = document.getElementById("fileRequest");

download.addEventListener('click', request);

function request() {
    window.location = 'document.docx';
}

.dwnld-cta {
    border-radius: 15px 15px;
    width: 100px;
    line-height: 22px
}

<h1>Download File</h1>
<button id="fileRequest" class="dwnld-cta">Download</button>

스 니펫 확장

— 데이비드 윌 라이트
소스

1

이것은 다운로드 될 파일이 페이지가로드 될 때 결정 되었기 때문에 마침내 나를 위해 일한 것입니다.

양식의 action 속성을 업데이트하는 JS :

function setFormAction() {
    document.getElementById("myDownloadButtonForm").action = //some code to get the filename;
}

양식의 action 속성을 업데이트하기 위해 JS 호출 :

<body onLoad="setFormAction();">

제출 버튼이있는 양식 태그 :

<form method="get" id="myDownloadButtonForm" action="">
    Click to open document:  
    <button type="submit">Open Document</button>
</form>

다음은 않았다 NOT 일 :

<form method="get" id="myDownloadButtonForm" action="javascript:someFunctionToReturnFileName();">

— 슬레이어
소스

로드시 파일이있는 경우 템플릿 엔진을 사용하여 서버에서 작업을 렌더링 할 수 없기 때문일 수 있습니다. 왜 JS 코드가 필요한가요?

— Andrei Epure

1

양식을 사용할 수 없다면 downloadjs를 사용한 다른 접근 방식이 적합합니다. Downloadjs는 blob 및 html 5 파일 API를 사용합니다.

{downloadjs (url, filename)}) />

* jsx / react 구문이지만 순수한 html로 사용할 수 있습니다

— 글렙 돌지 코프
소스

다른 도메인의 이미지에 대한 CORS 문제를 피하려면 다음과 같이 crossorigin = "anonymous"를 img 태그에 넣으십시오. <img src = "image.png"crossorigin = "anonymous"/>

— Jonathan Harris

0

태그 <body>와 </body>태그 사이 에 아래 코드를 사용하여 버튼을 넣으십시오.

<button>
    <a href="file.doc" download>Click to Download!</a>
</button>

이 작동합니다!

— 호날두
소스

1

크롬의 경우는 좋은 솔루션입니다

— 헤익 Aramyan

1

Safari에서도 작동하지 않습니다 : W3 Schools

— Alex

2

MS 브라우저에서 작동하지 않는 것은 다소 큰 문제이며 Chrome이 항상 답이되는 것은 아닙니다.

— SudoKid

HTML에서 버튼 안에 링크를 넣을 수 없습니다

— Quentin

0

file.doc?foo=bar&jon=doe양식 내에 숨겨진 필드를 추가하는 것과 같이 복잡한 URL이있는 경우 수행하는 다른 방법

<form method="get" action="file.doc">
  <input type="hidden" name="foo" value="bar" />
  <input type="hidden" name="john" value="doe" />
  <button type="submit">Download Now</button>
</form>

완전하지 않은 @Cfreak 답변에서 영감을 얻었습니다.

— 벨라 쉬
소스

0

텍스트없이 링크없이 태그를 추가 할 수 있습니다. code에서와 같이 버튼을 클릭하면 $ ( "yourlinkclass"). click () 함수를 실행하십시오.

— ThisisFish
소스

-1

다운로드 속성

 <a class="btn btn-success btn-sm" href="/file_path/file.type" download>
     <span>download </span>&nbsp;<i class="fa fa-download"></i>
 </a>

— 로 할라 하타미
소스

2

나는 당신의 대답을 좋아합니다

— George C.

2

문제는 링크 대신 버튼 으로이 작업을 수행하는 방법을 명시 적으로 묻는 것입니다.

— Quentin

-6

당신이 사용하는 경우 <a>태그를, 어떤 파일에 리드 전체 URL을 사용하는 것을 잊지 마세요 - 즉 :

<a href="http://www.example.com/folder1/file.doc">Download</a>

— 표
소스

나는 그것이 그 문제라고 생각하지 않습니다. 또한 링크가 파일과 동일한 경로에있는 경우 "절대"경로가 필요하지 않습니다.

— 로켓 Hazmat

@Rocket-물론 절대 경로는 정확하지만 올바르게 달성하는 가장 좋은 방법입니다. 도움이되는지 결정하기 위해 OP에 맡기겠습니다.

— Mark

문제는 링크 대신 버튼 으로이 작업을 수행하는 방법을 명시 적으로 묻는 것입니다.

— Quentin

이 솔루션에서 다운로드 속성이 누락되었습니다. 다운로드 속성을 추가 한 후에도 도메인 간 작동하지 않습니다.

— s sharif

-6

나에게 앵커 텍스트 대신 버튼을 추가하면 실제로 잘 작동합니다.

<a href="file.doc"><button>Download!</button></a>

대부분의 규칙으로는 문제가되지는 않지만 꽤 좋아 보입니다.

— 브라 나
소스

5

브라우저가 .doc 파일을 지원하지 않기 때문에 작동합니다.

— Adrian에 의해 디자인

HTML이 유효하지 않습니다. <a>요소는 요소를 포함 할 수 없습니다 <button>.

— Quentin

그래도 항상 그런 식 이었습니까? 이 답변은 당신이 그것을 언급했을 때 2 살이었습니다.

— John Lord