[javascript] Javascript / jQuery를 사용하여 파일 다운로드
사용자 브라우저가 수동으로 다운로드를 시작하도록해야합니다 $('a#someID').click();
그러나 window.href현재 페이지 내용을 다운로드하려는 파일로 대체하기 때문에이 방법을 사용할 수 없습니다 .
대신 새 창 / 탭에서 다운로드를 열고 싶습니다. 이것이 어떻게 가능한지?
답변
보이지 않는 것을 사용하십시오 <iframe>:
<iframe id="my_iframe" style="display:none;"></iframe>
<script>
function Download(url) {
document.getElementById('my_iframe').src = url;
};
</script>(예 : HTML 또는 텍스트 파일)가 다른 렌더링 할 수있는 것 파일을 다운로드 브라우저를 강제로, 서버가 파일의 설정해야합니다 MIME 타입을 같은 터무니없는 값으로 application/x-please-download-me대안 적으로 또는 application/octet-stream임의의 바이너리에 사용되는, 데이터.
새 탭에서만 열려면이 target속성을로 설정 한 링크를 클릭하면 됩니다 _blank.
jQuery에서 :
$('a#someID').attr({target: '_blank',
href : 'http://localhost/directory/file.pdf'});해당 링크를 클릭 할 때마다 파일이 새 탭 / 창에 다운로드됩니다.
답변
2019 최신 브라우저 업데이트
이것은 몇 가지주의 사항으로 권장되는 접근법입니다.
- 비교적 현대적인 브라우저가 필요합니다
- 파일이 매우 클 것으로 예상되는 경우 아래 작업 중 일부는 다운로드중인 파일 및 / 또는 기타 흥미로운 CPU만큼 큰 시스템 메모리를 소비 할 수 있으므로 원래 접근 방식 (iframe 및 쿠키)과 유사한 작업을 수행해야합니다. 부작용.
fetch('https://jsonplaceholder.typicode.com/todos/1')
.then(resp => resp.blob())
.then(blob => {
const url = window.URL.createObjectURL(blob);
const a = document.createElement('a');
a.style.display = 'none';
a.href = url;
// the filename you want
a.download = 'todo-1.json';
document.body.appendChild(a);
a.click();
window.URL.revokeObjectURL(url);
alert('your file has downloaded!'); // or you know, something with better UX...
})
.catch(() => alert('oh no!'));2012 년 독자적인 jQuery / iframe / 쿠키 기반 접근법
상황에 도움이 될 수 있는 jQuery 파일 다운로드 플러그인 ( Demo ) ( GitHub )을 만들었습니다 . iframe과 비슷하게 작동하지만 꽤 유용한 멋진 기능이 있습니다.
-
멋진 비주얼 (jQuery UI Dialog, 필수는 아님)로 설정하기가 매우 쉽고 모든 것도 테스트됩니다.
-
사용자는 파일 다운로드를 시작한 페이지를 떠나지 않습니다. 이 기능은 최신 웹 애플리케이션에 중요 해지고 있습니다
-
successCallback 및 failCallback 함수를 사용하면 어느 상황에서나 사용자가 보는 것에 대해 명시 적으로 나타낼 수 있습니다.
-
jQuery UI와 함께 개발자는 파일 다운로드가 발생하고 있음을 사용자에게 알려주는 모달을 쉽게 표시하거나 다운로드가 시작된 후 모달을 해체하거나 오류가 발생했다는 것을 사용자에게 친숙한 방식으로 알릴 수 있습니다. 이에 대한 예제 는 데모 를 참조하십시오 . 이것이 누군가를 돕기를 바랍니다!
다음은 약속과 함께 플러그인 소스 를 사용하는 간단한 유스 케이스 데모 입니다. 데모 페이지 뿐만 아니라 많은 다른, ‘더 나은 UX’의 예를 포함한다.
$.fileDownload('some/file.pdf')
.done(function () { alert('File download a success!'); })
.fail(function () { alert('File download failed!'); });답변
function downloadURI(uri, name)
{
var link = document.createElement("a");
// If you don't know the name or want to use
// the webserver default set name = ''
link.setAttribute('download', name);
link.href = uri;
document.body.appendChild(link);
link.click();
link.remove();
}대상 브라우저가 위 스 니펫을 원활하게 실행하는지 확인하십시오.
http://caniuse.com/#feat=download
답변
많은 사람들이 요소의 다운로드 속성에 대해 아는 것이 놀랍습니다. 그것에 대한 단어를 전파하십시오! HTML 링크를 숨기고 클릭하면 가짜 일 수 있습니다. html 링크에 다운로드 속성이 있으면 파일에 상관없이 파일을 다운로드합니다. 코드는 다음과 같습니다. 고양이 사진을 찾으면 다운로드합니다.
document.getElementById('download').click();<a href="https://docs.google.com/uc?id=0B0jH18Lft7ypSmRjdWg1c082Y2M" download id="download" hidden></a>참고 : 일부 브라우저에서는 지원되지 않습니다. http://www.w3schools.com/tags/att_a_download.asp
답변
jQuery 대신 다운로드 속성 을 사용 하는download 것이 좋습니다 .
<a href="your_link" download> file_name </a>파일을 열지 않고 다운로드합니다.
답변
jQuery를 이미 사용하고 있다면 더 작은 스 니펫을 생성하기 위해 jQuery를 사용할 수 있습니다.
Andrew의 jQuery 버전은 다음과 같습니다.
var $idown; // Keep it outside of the function, so it's initialized once.
downloadURL : function(url) {
if ($idown) {
$idown.attr('src',url);
} else {
$idown = $('<iframe>', { id:'idown', src:url }).hide().appendTo('body');
}
},
//... How to use it:
downloadURL('http://whatever.com/file.pdf');답변
Chrome, Firefox 및 IE8 이상에서 작동합니다.
var link=document.createElement('a');
document.body.appendChild(link);
link.href=url ;
link.click();