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

JAVASCRIPT / 글쓴이

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

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

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

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

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

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

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

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

답변

당신이 할 수있는 버튼

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

답변

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

답변

HTML :

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

답변

jQuery로 :

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

답변

오래된 스레드이지만 간단한 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)

답변

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

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

HTML :

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

자바 스크립트 :

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

답변

부트 스트랩 버전

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

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