HTML 버튼 또는 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 및 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에서도 작동합니다.
나는 이것이 당신이 찾고있는 해결책이라고 생각합니다.
<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);
}
는 어때:
<input type="button" value="Download Now!" onclick="window.location = 'file.doc';">
다운로드 링크를 숨기고 버튼을 클릭하도록 만들 수 있습니다.
<button onclick="document.getElementById('link').click()">Download!</button>
<a id="link" href="file.doc" download hidden></a>
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>이것은 다운로드 될 파일이 페이지가로드 될 때 결정 되었기 때문에 마침내 나를 위해 일한 것입니다.
양식의 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();">
양식을 사용할 수 없다면 downloadjs를 사용한 다른 접근 방식이 적합합니다. Downloadjs는 blob 및 html 5 파일 API를 사용합니다.
{downloadjs (url, filename)}) />
* jsx / react 구문이지만 순수한 html로 사용할 수 있습니다
태그 <body>와 </body>태그 사이 에 아래 코드를 사용하여 버튼을 넣으십시오.
<button>
<a href="file.doc" download>Click to Download!</a>
</button>
이것은 확실히 작동합니다!
다운로드 속성
<a class="btn btn-success btn-sm" href="/file_path/file.type" download>
<span>download </span> <i class="fa fa-download"></i>
</a>
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 답변에서 영감을 얻었습니다.
당신이 사용하는 경우 <a>태그를, 어떤 파일에 리드 전체 URL을 사용하는 것을 잊지 마세요 - 즉 :
<a href="http://www.example.com/folder1/file.doc">Download</a>
나에게 앵커 텍스트 대신 버튼을 추가하면 실제로 잘 작동합니다.
<a href="file.doc"><button>Download!</button></a>
대부분의 규칙으로는 문제가되지는 않지만 꽤 좋아 보입니다.
'development' 카테고리의 다른 글
| 'sudo : tty present 및 askpass program specified'오류 수정 방법 (0) | 2020.02.25 |
|---|---|
| .NET / C #-char []를 문자열로 변환 (0) | 2020.02.25 |
| 명령 줄에서 Xcode“빌드 및 아카이브” (0) | 2020.02.25 |
| 들여 쓰기로이 LaTeX 문서에 코드 삽입 (0) | 2020.02.25 |
| PHP에서 클로저 란 무엇이며 왜 "사용"식별자를 사용합니까? (0) | 2020.02.25 |