반응형
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년 최신 브라우저 업데이트
다음은 권장하는 접근법이며 몇 가지 주의사항이 있습니다.
- 비교적 최신 브라우저가 필요합니다.
- 파일이 매우 클 것으로 예상되는 경우는, 원래의 어프로치(iframe 및 cookie)와 같은 조작을 실시할 필요가 있습니다.이것은, 이하의 조작에 의해서, 적어도 다운로드중의 파일과 같은 사이즈의 시스템 메모리가 소비되거나, 그 외의 CPU 의 부작용이 발생할 가능성이 있기 때문입니다.
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/cookie 기반 접근법
jQuery File Download 플러그인(Demo)(Git Hub)을 작성했습니다.iframe과 거의 비슷하게 동작하지만, 매우 편리한 기능을 가지고 있습니다.
뛰어난 비주얼로 셋업이 매우 간단 (jQuery UI Dialog, 단 필수는 아님)모든 테스트 완료
사용자는 파일 다운로드를 시작한 페이지와 동일한 페이지를 떠나지 않습니다.이 기능은 현대의 웹 어플리케이션에서 중요해지고 있습니다.
success Callback 및 fail Callback 함수를 사용하면 사용자가 어떤 상황에서 무엇을 볼 수 있는지 명확하게 알 수 있습니다.
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.com/ ://caniuse.com/ #http=caniuse.com/
요소의 다운로드 속성에 대해 아는 사람이 많지 않은 것이 놀랍습니다.제발 소문 좀 퍼뜨려주세요!html 링크를 숨기고 클릭을 조작할 수 있습니다.html 링크에 download 속성이 있는 경우 파일을 다운로드하고 표시는 하지 않습니다.여기 암호가 있습니다.고양이 사진을 찾을 수 있으면 다운로드 할 것이다.
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 대신 Atribute를 사용할 것을 권장합니다.
<a href="your_link" download> file_name </a>
파일을 열지 않고 다운로드 합니다.
jQuery를 하고 있는 에는 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');
다른 페이지를 탐색할 필요가 없는 경우 도움이 될 수 있습니다.기본 Javascript 기능으로 백엔드가 Javascript에 있는 모든 플랫폼에서 사용할 수 있습니다.
window.location.assign('any url or file path')
Chrome, Firefox 및 IE8 이상에서 작동합니다.
var link=document.createElement('a');
document.body.appendChild(link);
link.href=url ;
link.click();
「」를한 예.iframe
function downloadURL(url) {
var hiddenIFrameID = 'hiddenDownloader',
iframe = document.getElementById(hiddenIFrameID);
if (iframe === null) {
iframe = document.createElement('iframe');
iframe.id = hiddenIFrameID;
iframe.style.display = 'none';
document.body.appendChild(iframe);
}
iframe.src = url;
};
원하는 위치에 함수를 호출하기만 하면 됩니다.
downloadURL('path/to/my/file');
저는 아래 스니펫을 사용하게 되었고 IE에서 테스트되지 않은 대부분의 브라우저에서 동작합니다.
let data = JSON.stringify([{email: "test@domain.com", name: "test"}, {email: "anothertest@example.com", name: "anothertest"}]);
let type = "application/json", name = "testfile.json";
downloader(data, type, name)
function downloader(data, type, name) {
let blob = new Blob([data], {type});
let url = window.URL.createObjectURL(blob);
downloadURI(url, name);
window.URL.revokeObjectURL(url);
}
function downloadURI(uri, name) {
let link = document.createElement("a");
link.download = name;
link.href = uri;
link.click();
}갱신하다
function downloadURI(uri, name) {
let link = document.createElement("a");
link.download = name;
link.href = uri;
link.click();
}
function downloader(data, type, name) {
let blob = new Blob([data], {type});
let url = window.URL.createObjectURL(blob);
downloadURI(url, name);
window.URL.revokeObjectURL(url);
}
불과 7년 후 iframe 또는 link 대신 폼을 사용하는 jQuery 솔루션이 등장합니다.
$('<form></form>')
.attr('action', filePath)
.appendTo('body').submit().remove();
이 테스트는 에서 실시했습니다.
- 크롬 55
- 파이어폭스 50
- Edge IE8-10
- iOS 10(사파리/크롬)
- 안드로이드 크롬
이 해결책의 단점을 아는 사람이 있다면 기꺼이 듣고 싶습니다.
풀 데모:
<html>
<head><script src="https://code.jquery.com/jquery-1.11.3.js"></script></head>
<body>
<script>
var filePath = window.prompt("Enter a file URL","http://jqueryui.com/resources/download/jquery-ui-1.12.1.zip");
$('<form></form>').attr('action', filePath).appendTo('body').submit().remove();
</script>
</body>
</html>
fs-browers 패키지를 사용할 수도 있습니다.
클라이언트측에서 사용하기 쉬운 다운로드 방법을 갖추고 있습니다.
:건이:::::::
import { downloadFile } from 'fs-browsers';
downloadFile(url-to-the-file);질문이 너무 오래되었는지 모르겠지만 다운로드 마임 유형(zip 아카이브 등)이 올바르면 window.location을 다운로드 URL로 설정하면 됩니다.
var download = function(downloadURL) {
location = downloadURL;
});
download('http://example.com/archive.zip'); //correct usage
download('http://example.com/page.html'); //DON'T
Imagine Breaker의 답변을 개선하기 위해 FF 및 IE에서 지원됩니다.
var evt = document.createEvent("MouseEvents");
evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
function downloadURI(uri, name) {
var link = document.createElement("a");
link.download = name;
link.href = uri;
link.dispatchEvent(evt);
}
'아까', '아까', '아까', '아까', '아까',dispatchEvent 기능하다click();
javascript를 통해 다운로드 링크를 새 탭으로 끌어다 놓았을 때처럼 파일을 다운로드하는 페이지를 열 수 있습니다.
Window.open("https://www.MyServer.
Org/downloads/ardiuno/WgiWho=?:8080")
창이 열리면 다운로드 페이지가 열리고 자동으로 닫힙니다.
FireFox, Chrome 및 IE 코드의 데이터를 다운로드하기 위한 Most Complete and Working(테스트 완료) 코드는 다음과 같습니다.데이터가 id='textarea_area'인 texarea 필드에 있고 filename이 데이터를 다운로드할 파일 이름이라고 가정합니다.
function download(filename) {
if (typeof filename==='undefined') filename = ""; // default
value = document.getElementById('textarea_area').value;
filetype="text/*";
extension=filename.substring(filename.lastIndexOf("."));
for (var i = 0; i < extToMIME.length; i++) {
if (extToMIME[i][0].localeCompare(extension)==0) {
filetype=extToMIME[i][1];
break;
}
}
var pom = document.createElement('a');
pom.setAttribute('href', 'data: '+filetype+';charset=utf-8,' + '\ufeff' + encodeURIComponent(value)); // Added BOM too
pom.setAttribute('download', filename);
if (document.createEvent) {
if (navigator.userAgent.indexOf('MSIE') !== -1 || navigator.appVersion.indexOf('Trident/') > 0) { // IE
blobObject = new Blob(['\ufeff'+value]);
window.navigator.msSaveBlob(blobObject, filename);
} else { // FF, Chrome
var event = document.createEvent('MouseEvents');
event.initEvent('click', true, true);
pom.dispatchEvent(event);
}
} else if( document.createEventObject ) { // Have No Idea
var evObj = document.createEventObject();
pom.fireEvent( 'onclick' , evObj );
} else { // For Any Case
pom.click();
}
}
그리고 전화만 하면 돼
<a href="javascript:download();">Download</a>
다운로드 시작의 경우.
다운로드 대화상자의 올바른 MIME 유형을 설정하기 위한 배열은 다음과 같습니다.
// ----------------------- Extensions to MIME --------- //
// List of mime types
// combination of values from Windows 7 Registry and
// from C:\Windows\System32\inetsrv\config\applicationHost.config
// some added, including .7z and .dat
var extToMIME = [
[".323", "text/h323"],
[".3g2", "video/3gpp2"],
[".3gp", "video/3gpp"],
[".3gp2", "video/3gpp2"],
[".3gpp", "video/3gpp"],
[".7z", "application/x-7z-compressed"],
[".aa", "audio/audible"],
[".AAC", "audio/aac"],
[".aaf", "application/octet-stream"],
[".aax", "audio/vnd.audible.aax"],
[".ac3", "audio/ac3"],
[".aca", "application/octet-stream"],
[".accda", "application/msaccess.addin"],
[".accdb", "application/msaccess"],
[".accdc", "application/msaccess.cab"],
[".accde", "application/msaccess"],
[".accdr", "application/msaccess.runtime"],
[".accdt", "application/msaccess"],
[".accdw", "application/msaccess.webapplication"],
[".accft", "application/msaccess.ftemplate"],
[".acx", "application/internet-property-stream"],
[".AddIn", "text/xml"],
[".ade", "application/msaccess"],
[".adobebridge", "application/x-bridge-url"],
[".adp", "application/msaccess"],
[".ADT", "audio/vnd.dlna.adts"],
[".ADTS", "audio/aac"],
[".afm", "application/octet-stream"],
[".ai", "application/postscript"],
[".aif", "audio/x-aiff"],
[".aifc", "audio/aiff"],
[".aiff", "audio/aiff"],
[".air", "application/vnd.adobe.air-application-installer-package+zip"],
[".amc", "application/x-mpeg"],
[".application", "application/x-ms-application"],
[".art", "image/x-jg"],
[".asa", "application/xml"],
[".asax", "application/xml"],
[".ascx", "application/xml"],
[".asd", "application/octet-stream"],
[".asf", "video/x-ms-asf"],
[".ashx", "application/xml"],
[".asi", "application/octet-stream"],
[".asm", "text/plain"],
[".asmx", "application/xml"],
[".aspx", "application/xml"],
[".asr", "video/x-ms-asf"],
[".asx", "video/x-ms-asf"],
[".atom", "application/atom+xml"],
[".au", "audio/basic"],
[".avi", "video/x-msvideo"],
[".axs", "application/olescript"],
[".bas", "text/plain"],
[".bcpio", "application/x-bcpio"],
[".bin", "application/octet-stream"],
[".bmp", "image/bmp"],
[".c", "text/plain"],
[".cab", "application/octet-stream"],
[".caf", "audio/x-caf"],
[".calx", "application/vnd.ms-office.calx"],
[".cat", "application/vnd.ms-pki.seccat"],
[".cc", "text/plain"],
[".cd", "text/plain"],
[".cdda", "audio/aiff"],
[".cdf", "application/x-cdf"],
[".cer", "application/x-x509-ca-cert"],
[".chm", "application/octet-stream"],
[".class", "application/x-java-applet"],
[".clp", "application/x-msclip"],
[".cmx", "image/x-cmx"],
[".cnf", "text/plain"],
[".cod", "image/cis-cod"],
[".config", "application/xml"],
[".contact", "text/x-ms-contact"],
[".coverage", "application/xml"],
[".cpio", "application/x-cpio"],
[".cpp", "text/plain"],
[".crd", "application/x-mscardfile"],
[".crl", "application/pkix-crl"],
[".crt", "application/x-x509-ca-cert"],
[".cs", "text/plain"],
[".csdproj", "text/plain"],
[".csh", "application/x-csh"],
[".csproj", "text/plain"],
[".css", "text/css"],
[".csv", "text/csv"],
[".cur", "application/octet-stream"],
[".cxx", "text/plain"],
[".dat", "application/octet-stream"],
[".datasource", "application/xml"],
[".dbproj", "text/plain"],
[".dcr", "application/x-director"],
[".def", "text/plain"],
[".deploy", "application/octet-stream"],
[".der", "application/x-x509-ca-cert"],
[".dgml", "application/xml"],
[".dib", "image/bmp"],
[".dif", "video/x-dv"],
[".dir", "application/x-director"],
[".disco", "text/xml"],
[".dll", "application/x-msdownload"],
[".dll.config", "text/xml"],
[".dlm", "text/dlm"],
[".doc", "application/msword"],
[".docm", "application/vnd.ms-word.document.macroEnabled.12"],
[".docx", "application/vnd.openxmlformats-officedocument.wordprocessingml.document"],
[".dot", "application/msword"],
[".dotm", "application/vnd.ms-word.template.macroEnabled.12"],
[".dotx", "application/vnd.openxmlformats-officedocument.wordprocessingml.template"],
[".dsp", "application/octet-stream"],
[".dsw", "text/plain"],
[".dtd", "text/xml"],
[".dtsConfig", "text/xml"],
[".dv", "video/x-dv"],
[".dvi", "application/x-dvi"],
[".dwf", "drawing/x-dwf"],
[".dwp", "application/octet-stream"],
[".dxr", "application/x-director"],
[".eml", "message/rfc822"],
[".emz", "application/octet-stream"],
[".eot", "application/octet-stream"],
[".eps", "application/postscript"],
[".etl", "application/etl"],
[".etx", "text/x-setext"],
[".evy", "application/envoy"],
[".exe", "application/octet-stream"],
[".exe.config", "text/xml"],
[".fdf", "application/vnd.fdf"],
[".fif", "application/fractals"],
[".filters", "Application/xml"],
[".fla", "application/octet-stream"],
[".flr", "x-world/x-vrml"],
[".flv", "video/x-flv"],
[".fsscript", "application/fsharp-script"],
[".fsx", "application/fsharp-script"],
[".generictest", "application/xml"],
[".gif", "image/gif"],
[".group", "text/x-ms-group"],
[".gsm", "audio/x-gsm"],
[".gtar", "application/x-gtar"],
[".gz", "application/x-gzip"],
[".h", "text/plain"],
[".hdf", "application/x-hdf"],
[".hdml", "text/x-hdml"],
[".hhc", "application/x-oleobject"],
[".hhk", "application/octet-stream"],
[".hhp", "application/octet-stream"],
[".hlp", "application/winhlp"],
[".hpp", "text/plain"],
[".hqx", "application/mac-binhex40"],
[".hta", "application/hta"],
[".htc", "text/x-component"],
[".htm", "text/html"],
[".html", "text/html"],
[".htt", "text/webviewhtml"],
[".hxa", "application/xml"],
[".hxc", "application/xml"],
[".hxd", "application/octet-stream"],
[".hxe", "application/xml"],
[".hxf", "application/xml"],
[".hxh", "application/octet-stream"],
[".hxi", "application/octet-stream"],
[".hxk", "application/xml"],
[".hxq", "application/octet-stream"],
[".hxr", "application/octet-stream"],
[".hxs", "application/octet-stream"],
[".hxt", "text/html"],
[".hxv", "application/xml"],
[".hxw", "application/octet-stream"],
[".hxx", "text/plain"],
[".i", "text/plain"],
[".ico", "image/x-icon"],
[".ics", "application/octet-stream"],
[".idl", "text/plain"],
[".ief", "image/ief"],
[".iii", "application/x-iphone"],
[".inc", "text/plain"],
[".inf", "application/octet-stream"],
[".inl", "text/plain"],
[".ins", "application/x-internet-signup"],
[".ipa", "application/x-itunes-ipa"],
[".ipg", "application/x-itunes-ipg"],
[".ipproj", "text/plain"],
[".ipsw", "application/x-itunes-ipsw"],
[".iqy", "text/x-ms-iqy"],
[".isp", "application/x-internet-signup"],
[".ite", "application/x-itunes-ite"],
[".itlp", "application/x-itunes-itlp"],
[".itms", "application/x-itunes-itms"],
[".itpc", "application/x-itunes-itpc"],
[".IVF", "video/x-ivf"],
[".jar", "application/java-archive"],
[".java", "application/octet-stream"],
[".jck", "application/liquidmotion"],
[".jcz", "application/liquidmotion"],
[".jfif", "image/pjpeg"],
[".jnlp", "application/x-java-jnlp-file"],
[".jpb", "application/octet-stream"],
[".jpe", "image/jpeg"],
[".jpeg", "image/jpeg"],
[".jpg", "image/jpeg"],
[".js", "application/x-javascript"],
[".json", "application/json"],
[".jsx", "text/jscript"],
[".jsxbin", "text/plain"],
[".latex", "application/x-latex"],
[".library-ms", "application/windows-library+xml"],
[".lit", "application/x-ms-reader"],
[".loadtest", "application/xml"],
[".lpk", "application/octet-stream"],
[".lsf", "video/x-la-asf"],
[".lst", "text/plain"],
[".lsx", "video/x-la-asf"],
[".lzh", "application/octet-stream"],
[".m13", "application/x-msmediaview"],
[".m14", "application/x-msmediaview"],
[".m1v", "video/mpeg"],
[".m2t", "video/vnd.dlna.mpeg-tts"],
[".m2ts", "video/vnd.dlna.mpeg-tts"],
[".m2v", "video/mpeg"],
[".m3u", "audio/x-mpegurl"],
[".m3u8", "audio/x-mpegurl"],
[".m4a", "audio/m4a"],
[".m4b", "audio/m4b"],
[".m4p", "audio/m4p"],
[".m4r", "audio/x-m4r"],
[".m4v", "video/x-m4v"],
[".mac", "image/x-macpaint"],
[".mak", "text/plain"],
[".man", "application/x-troff-man"],
[".manifest", "application/x-ms-manifest"],
[".map", "text/plain"],
[".master", "application/xml"],
[".mda", "application/msaccess"],
[".mdb", "application/x-msaccess"],
[".mde", "application/msaccess"],
[".mdp", "application/octet-stream"],
[".me", "application/x-troff-me"],
[".mfp", "application/x-shockwave-flash"],
[".mht", "message/rfc822"],
[".mhtml", "message/rfc822"],
[".mid", "audio/mid"],
[".midi", "audio/mid"],
[".mix", "application/octet-stream"],
[".mk", "text/plain"],
[".mmf", "application/x-smaf"],
[".mno", "text/xml"],
[".mny", "application/x-msmoney"],
[".mod", "video/mpeg"],
[".mov", "video/quicktime"],
[".movie", "video/x-sgi-movie"],
[".mp2", "video/mpeg"],
[".mp2v", "video/mpeg"],
[".mp3", "audio/mpeg"],
[".mp4", "video/mp4"],
[".mp4v", "video/mp4"],
[".mpa", "video/mpeg"],
[".mpe", "video/mpeg"],
[".mpeg", "video/mpeg"],
[".mpf", "application/vnd.ms-mediapackage"],
[".mpg", "video/mpeg"],
[".mpp", "application/vnd.ms-project"],
[".mpv2", "video/mpeg"],
[".mqv", "video/quicktime"],
[".ms", "application/x-troff-ms"],
[".msi", "application/octet-stream"],
[".mso", "application/octet-stream"],
[".mts", "video/vnd.dlna.mpeg-tts"],
[".mtx", "application/xml"],
[".mvb", "application/x-msmediaview"],
[".mvc", "application/x-miva-compiled"],
[".mxp", "application/x-mmxp"],
[".nc", "application/x-netcdf"],
[".nsc", "video/x-ms-asf"],
[".nws", "message/rfc822"],
[".ocx", "application/octet-stream"],
[".oda", "application/oda"],
[".odc", "text/x-ms-odc"],
[".odh", "text/plain"],
[".odl", "text/plain"],
[".odp", "application/vnd.oasis.opendocument.presentation"],
[".ods", "application/oleobject"],
[".odt", "application/vnd.oasis.opendocument.text"],
[".one", "application/onenote"],
[".onea", "application/onenote"],
[".onepkg", "application/onenote"],
[".onetmp", "application/onenote"],
[".onetoc", "application/onenote"],
[".onetoc2", "application/onenote"],
[".orderedtest", "application/xml"],
[".osdx", "application/opensearchdescription+xml"],
[".p10", "application/pkcs10"],
[".p12", "application/x-pkcs12"],
[".p7b", "application/x-pkcs7-certificates"],
[".p7c", "application/pkcs7-mime"],
[".p7m", "application/pkcs7-mime"],
[".p7r", "application/x-pkcs7-certreqresp"],
[".p7s", "application/pkcs7-signature"],
[".pbm", "image/x-portable-bitmap"],
[".pcast", "application/x-podcast"],
[".pct", "image/pict"],
[".pcx", "application/octet-stream"],
[".pcz", "application/octet-stream"],
[".pdf", "application/pdf"],
[".pfb", "application/octet-stream"],
[".pfm", "application/octet-stream"],
[".pfx", "application/x-pkcs12"],
[".pgm", "image/x-portable-graymap"],
[".pic", "image/pict"],
[".pict", "image/pict"],
[".pkgdef", "text/plain"],
[".pkgundef", "text/plain"],
[".pko", "application/vnd.ms-pki.pko"],
[".pls", "audio/scpls"],
[".pma", "application/x-perfmon"],
[".pmc", "application/x-perfmon"],
[".pml", "application/x-perfmon"],
[".pmr", "application/x-perfmon"],
[".pmw", "application/x-perfmon"],
[".png", "image/png"],
[".pnm", "image/x-portable-anymap"],
[".pnt", "image/x-macpaint"],
[".pntg", "image/x-macpaint"],
[".pnz", "image/png"],
[".pot", "application/vnd.ms-powerpoint"],
[".potm", "application/vnd.ms-powerpoint.template.macroEnabled.12"],
[".potx", "application/vnd.openxmlformats-officedocument.presentationml.template"],
[".ppa", "application/vnd.ms-powerpoint"],
[".ppam", "application/vnd.ms-powerpoint.addin.macroEnabled.12"],
[".ppm", "image/x-portable-pixmap"],
[".pps", "application/vnd.ms-powerpoint"],
[".ppsm", "application/vnd.ms-powerpoint.slideshow.macroEnabled.12"],
[".ppsx", "application/vnd.openxmlformats-officedocument.presentationml.slideshow"],
[".ppt", "application/vnd.ms-powerpoint"],
[".pptm", "application/vnd.ms-powerpoint.presentation.macroEnabled.12"],
[".pptx", "application/vnd.openxmlformats-officedocument.presentationml.presentation"],
[".prf", "application/pics-rules"],
[".prm", "application/octet-stream"],
[".prx", "application/octet-stream"],
[".ps", "application/postscript"],
[".psc1", "application/PowerShell"],
[".psd", "application/octet-stream"],
[".psess", "application/xml"],
[".psm", "application/octet-stream"],
[".psp", "application/octet-stream"],
[".pub", "application/x-mspublisher"],
[".pwz", "application/vnd.ms-powerpoint"],
[".qht", "text/x-html-insertion"],
[".qhtm", "text/x-html-insertion"],
[".qt", "video/quicktime"],
[".qti", "image/x-quicktime"],
[".qtif", "image/x-quicktime"],
[".qtl", "application/x-quicktimeplayer"],
[".qxd", "application/octet-stream"],
[".ra", "audio/x-pn-realaudio"],
[".ram", "audio/x-pn-realaudio"],
[".rar", "application/octet-stream"],
[".ras", "image/x-cmu-raster"],
[".rat", "application/rat-file"],
[".rc", "text/plain"],
[".rc2", "text/plain"],
[".rct", "text/plain"],
[".rdlc", "application/xml"],
[".resx", "application/xml"],
[".rf", "image/vnd.rn-realflash"],
[".rgb", "image/x-rgb"],
[".rgs", "text/plain"],
[".rm", "application/vnd.rn-realmedia"],
[".rmi", "audio/mid"],
[".rmp", "application/vnd.rn-rn_music_package"],
[".roff", "application/x-troff"],
[".rpm", "audio/x-pn-realaudio-plugin"],
[".rqy", "text/x-ms-rqy"],
[".rtf", "application/rtf"],
[".rtx", "text/richtext"],
[".ruleset", "application/xml"],
[".s", "text/plain"],
[".safariextz", "application/x-safari-safariextz"],
[".scd", "application/x-msschedule"],
[".sct", "text/scriptlet"],
[".sd2", "audio/x-sd2"],
[".sdp", "application/sdp"],
[".sea", "application/octet-stream"],
[".searchConnector-ms", "application/windows-search-connector+xml"],
[".setpay", "application/set-payment-initiation"],
[".setreg", "application/set-registration-initiation"],
[".settings", "application/xml"],
[".sgimb", "application/x-sgimb"],
[".sgml", "text/sgml"],
[".sh", "application/x-sh"],
[".shar", "application/x-shar"],
[".shtml", "text/html"],
[".sit", "application/x-stuffit"],
[".sitemap", "application/xml"],
[".skin", "application/xml"],
[".sldm", "application/vnd.ms-powerpoint.slide.macroEnabled.12"],
[".sldx", "application/vnd.openxmlformats-officedocument.presentationml.slide"],
[".slk", "application/vnd.ms-excel"],
[".sln", "text/plain"],
[".slupkg-ms", "application/x-ms-license"],
[".smd", "audio/x-smd"],
[".smi", "application/octet-stream"],
[".smx", "audio/x-smd"],
[".smz", "audio/x-smd"],
[".snd", "audio/basic"],
[".snippet", "application/xml"],
[".snp", "application/octet-stream"],
[".sol", "text/plain"],
[".sor", "text/plain"],
[".spc", "application/x-pkcs7-certificates"],
[".spl", "application/futuresplash"],
[".src", "application/x-wais-source"],
[".srf", "text/plain"],
[".SSISDeploymentManifest", "text/xml"],
[".ssm", "application/streamingmedia"],
[".sst", "application/vnd.ms-pki.certstore"],
[".stl", "application/vnd.ms-pki.stl"],
[".sv4cpio", "application/x-sv4cpio"],
[".sv4crc", "application/x-sv4crc"],
[".svc", "application/xml"],
[".swf", "application/x-shockwave-flash"],
[".t", "application/x-troff"],
[".tar", "application/x-tar"],
[".tcl", "application/x-tcl"],
[".testrunconfig", "application/xml"],
[".testsettings", "application/xml"],
[".tex", "application/x-tex"],
[".texi", "application/x-texinfo"],
[".texinfo", "application/x-texinfo"],
[".tgz", "application/x-compressed"],
[".thmx", "application/vnd.ms-officetheme"],
[".thn", "application/octet-stream"],
[".tif", "image/tiff"],
[".tiff", "image/tiff"],
[".tlh", "text/plain"],
[".tli", "text/plain"],
[".toc", "application/octet-stream"],
[".tr", "application/x-troff"],
[".trm", "application/x-msterminal"],
[".trx", "application/xml"],
[".ts", "video/vnd.dlna.mpeg-tts"],
[".tsv", "text/tab-separated-values"],
[".ttf", "application/octet-stream"],
[".tts", "video/vnd.dlna.mpeg-tts"],
[".txt", "text/plain"],
[".u32", "application/octet-stream"],
[".uls", "text/iuls"],
[".user", "text/plain"],
[".ustar", "application/x-ustar"],
[".vb", "text/plain"],
[".vbdproj", "text/plain"],
[".vbk", "video/mpeg"],
[".vbproj", "text/plain"],
[".vbs", "text/vbscript"],
[".vcf", "text/x-vcard"],
[".vcproj", "Application/xml"],
[".vcs", "text/plain"],
[".vcxproj", "Application/xml"],
[".vddproj", "text/plain"],
[".vdp", "text/plain"],
[".vdproj", "text/plain"],
[".vdx", "application/vnd.ms-visio.viewer"],
[".vml", "text/xml"],
[".vscontent", "application/xml"],
[".vsct", "text/xml"],
[".vsd", "application/vnd.visio"],
[".vsi", "application/ms-vsi"],
[".vsix", "application/vsix"],
[".vsixlangpack", "text/xml"],
[".vsixmanifest", "text/xml"],
[".vsmdi", "application/xml"],
[".vspscc", "text/plain"],
[".vss", "application/vnd.visio"],
[".vsscc", "text/plain"],
[".vssettings", "text/xml"],
[".vssscc", "text/plain"],
[".vst", "application/vnd.visio"],
[".vstemplate", "text/xml"],
[".vsto", "application/x-ms-vsto"],
[".vsw", "application/vnd.visio"],
[".vsx", "application/vnd.visio"],
[".vtx", "application/vnd.visio"],
[".wav", "audio/wav"],
[".wave", "audio/wav"],
[".wax", "audio/x-ms-wax"],
[".wbk", "application/msword"],
[".wbmp", "image/vnd.wap.wbmp"],
[".wcm", "application/vnd.ms-works"],
[".wdb", "application/vnd.ms-works"],
[".wdp", "image/vnd.ms-photo"],
[".webarchive", "application/x-safari-webarchive"],
[".webtest", "application/xml"],
[".wiq", "application/xml"],
[".wiz", "application/msword"],
[".wks", "application/vnd.ms-works"],
[".WLMP", "application/wlmoviemaker"],
[".wlpginstall", "application/x-wlpg-detect"],
[".wlpginstall3", "application/x-wlpg3-detect"],
[".wm", "video/x-ms-wm"],
[".wma", "audio/x-ms-wma"],
[".wmd", "application/x-ms-wmd"],
[".wmf", "application/x-msmetafile"],
[".wml", "text/vnd.wap.wml"],
[".wmlc", "application/vnd.wap.wmlc"],
[".wmls", "text/vnd.wap.wmlscript"],
[".wmlsc", "application/vnd.wap.wmlscriptc"],
[".wmp", "video/x-ms-wmp"],
[".wmv", "video/x-ms-wmv"],
[".wmx", "video/x-ms-wmx"],
[".wmz", "application/x-ms-wmz"],
[".wpl", "application/vnd.ms-wpl"],
[".wps", "application/vnd.ms-works"],
[".wri", "application/x-mswrite"],
[".wrl", "x-world/x-vrml"],
[".wrz", "x-world/x-vrml"],
[".wsc", "text/scriptlet"],
[".wsdl", "text/xml"],
[".wvx", "video/x-ms-wvx"],
[".x", "application/directx"],
[".xaf", "x-world/x-vrml"],
[".xaml", "application/xaml+xml"],
[".xap", "application/x-silverlight-app"],
[".xbap", "application/x-ms-xbap"],
[".xbm", "image/x-xbitmap"],
[".xdr", "text/plain"],
[".xht", "application/xhtml+xml"],
[".xhtml", "application/xhtml+xml"],
[".xla", "application/vnd.ms-excel"],
[".xlam", "application/vnd.ms-excel.addin.macroEnabled.12"],
[".xlc", "application/vnd.ms-excel"],
[".xld", "application/vnd.ms-excel"],
[".xlk", "application/vnd.ms-excel"],
[".xll", "application/vnd.ms-excel"],
[".xlm", "application/vnd.ms-excel"],
[".xls", "application/vnd.ms-excel"],
[".xlsb", "application/vnd.ms-excel.sheet.binary.macroEnabled.12"],
[".xlsm", "application/vnd.ms-excel.sheet.macroEnabled.12"],
[".xlsx", "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"],
[".xlt", "application/vnd.ms-excel"],
[".xltm", "application/vnd.ms-excel.template.macroEnabled.12"],
[".xltx", "application/vnd.openxmlformats-officedocument.spreadsheetml.template"],
[".xlw", "application/vnd.ms-excel"],
[".xml", "text/xml"],
[".xmta", "application/xml"],
[".xof", "x-world/x-vrml"],
[".XOML", "text/plain"],
[".xpm", "image/x-xpixmap"],
[".xps", "application/vnd.ms-xpsdocument"],
[".xrm-ms", "text/xml"],
[".xsc", "application/xml"],
[".xsd", "text/xml"],
[".xsf", "text/xml"],
[".xsl", "text/xml"],
[".xslt", "text/xml"],
[".xsn", "application/octet-stream"],
[".xss", "application/xml"],
[".xtp", "application/octet-stream"],
[".xwd", "image/x-xwindowdump"],
[".z", "application/x-compress"],
[".zip", "application/x-zip-compressed"]
];
// ----------------------- End of Extensions to MIME --------- //
HTML의 Download Attribute를 사용하면 됩니다.좋은 Javascript를 사용하면 파일을 직접 다운로드 할 수 있습니다.앵커 태그의 다운로드 속성은 다운로드되는 파일이 호스트되는 링크를 가리켜야 합니다.
먼저 URL을 리소스 경로로 지정합니다.
var url = 'your url goes here';
다음과 같이 필요한 속성을 가진 앵커 태그를 만듭니다.
var elem = document.createElement('a');
elem.href = url;
elem.download = url;
elem.id="downloadAnchor";
웹 페이지의 본문 요소에 앵커 태그를 추가합니다.
document.body.appendChild(elem);
이제 클릭 이벤트를 프로그래밍 방식으로 트리거합니다.앵커 태그를 클릭하면 다운로드가 트리거됩니다.
$('#downloadAnchor').click();
모든 것을 종합하면:
var url = 'your url goes here';
var elem = document.createElement('a');
elem.href = url;
elem.download = url;
elem.id="downloadAnchor";
document.body.appendChild(elem);
$('#downloadAnchor').click();
추가 정보:위 코드에는 화려한 것은 없지만, Chrome Devtools의 콘솔에서 동작하는 클라이언트측 JavaScript 뿐이지만, 강력하고 웹 페이지 크롤링과 같은 많은 가능성을 열어줍니다.
예를 들어 Devtools 콘솔에서 실행되는 다음 코드 청크는 페이지의 모든 링크를 새 탭에 엽니다. 이 웹 페이지를 열고 devtools를 열고 브라우저 콘솔에서 이 스크립트를 실행하고 JavaScript가 풀리는 것을 확인합니다(참고:아래 코드는 순전히 교육용입니다.)
해당 사이트에 대해 팝업을 활성화해야 합니다. 그렇지 않으면 기본 팝업 차단에 의해 앵커 클릭이 비활성화됩니다.
var links = document.getElementsByClassName("_3ATBKe");
for(var i=0;i<links.length;i++){
var title = document.getElementsByClassName("_3ATBKe")[i].firstElementChild.firstElementChild.innerText.replaceAll('|','-').replaceAll(':','x');
console.log('Opening..'+title);
links[i].firstElementChild.click();
}
주의: 이것은 앵커 클릭에만 국한된 것이 아닙니다.웹페이지에 있는 거의 모든 것을 다운로드 할 수 있습니다.웹 페이지에 무엇인가(이미지, 오디오, 비디오)가 로드되면 UI에서 제공이 제공되지 않더라도 스크립트를 작성하여 다운로드할 수 있습니다.
이것은 크롬 v72에서 테스트되어 정상적으로 동작하고 있습니다.
function down_file(url,name){
var a = $("<a>")
.attr("href", url)
.attr("download", name)
.appendTo("body");
a[0].click();
a.remove();
}
down_file('https://www.useotools.com/uploads/nulogo[1].png','logo.png')
파일을 다운로드하려고 할 때 발생할 수 있는 작은 일들은 매우 많습니다.브라우저 간의 불일치만 해도 악몽이다.나는 이 멋진 작은 도서관을 이용하게 되었다.https://github.com/rndme/download
좋은 점은 URL뿐만 아니라 다운로드하고 싶은 클라이언트 측 데이터도 유연하다는 것입니다.
- 텍스트 문자열
- 텍스트 데이터URL
- 텍스트 블롭
- 텍스트 배열
- html 문자열
- html blob
- 에이잭스 콜백
- 바이너리 파일
파일의 링크만 통과합니다.원래 이름으로 파일을 다운로드합니다.
function downloadFileWithLink(href) {
var link = document.createElement("a");
let name = (href?.split("/") || [])
name = name[name?.length-1]
link.setAttribute('download', name);
link.href = href;
document.body.appendChild(link);
link.click();
link.remove();
}
/**
* Try XHR methods in order and store XHR factory.
*
* @return <Function> XHR function or equivalent
*/
var createXMLHTTPObject = function() {
var xmlhttp, XMLHttpFactories = [
function() {
return new XMLHttpRequest();
}, function() {
return new ActiveXObject('Msxml2.XMLHTTP');
}, function() {
return new ActiveXObject('Msxml3.XMLHTTP');
}, function() {
return new ActiveXObject('Microsoft.XMLHTTP');
}
];
for (var i = 0; i < XMLHttpFactories.length; i++) {
try {
xmlhttp = XMLHttpFactories[i]();
// Use memoization to cache the factory
createXMLHTTPObject = XMLHttpFactories[i];
return xmlhttp;
} catch (e) {
}
}
}
/**
* @return the text from a given URL
*/
function ajax(url) {
var req = createXMLHTTPObject();
if (req) {
try {
req.open('GET', url, false);
req.send(null);
return req.responseText;
} catch (e) {
}
}
return '';
}
클릭 이벤트 전이라고 하는 마우스 다운 이벤트를 사용하는 것이 좋습니다.이렇게 하면 브라우저는 클릭 이벤트를 자연스럽게 처리하므로 코드 이상 현상이 발생하지 않습니다.
(function ($) {
// with this solution, the browser handles the download link naturally (tested in chrome and firefox)
$(document).ready(function () {
var url = '/private/downloads/myfile123.pdf';
$("a#someID").on('mousedown', function () {
$(this).attr("href", url);
});
});
})(jQuery);
Corbacho의 뛰어난 솔루션, 나는 단지 var o를 없애기 위해 적응했다.
function downloadURL(url) {
if( $('#idown').length ){
$('#idown').attr('src',url);
}else{
$('<iframe>', { id:'idown', src:url }).hide().appendTo('body');
}
}
Firefox 및 Chrome 테스트 완료:
var link = document.createElement('a');
link.download = 'fileName.ext'
link.href = 'http://down.serv/file.ext';
// Because firefox not executing the .click() well
// We need to create mouse event initialization.
var clickEvent = document.createEvent("MouseEvent");
clickEvent.initEvent("click", true, true);
link.dispatchEvent(clickEvent);
이것은 파이어폭스용 "크롬" 방식의 솔루션입니다(다른 브라우저에서는 테스트되지 않았으므로 컴파일러빌리티에 대한 코멘트를 남겨주세요).
FORM 태그는 어디에서나 사용할 수 있고 서버에 임시 파일을 작성할 필요가 없기 때문에 좋은 결과를 얻을 수 있었습니다.방법은 다음과 같습니다.
클라이언트 측(페이지 HTML)에서 다음과 같은 보이지 않는 양식을 만듭니다.
<form method="POST" action="/download.php" target="_blank" id="downloadForm">
<input type="hidden" name="data" id="csv">
</form>
그런 다음 버튼에 다음 Javascript 코드를 추가합니다.
$('#button').click(function() {
$('#csv').val('---your data---');
$('#downloadForm').submit();
}
는, 「PHP」에 .download.php:
<?php
header('Content-Type: text/csv');
header('Content-Description: File Transfer');
header('Content-Type: application/octet-stream');
header('Content-Disposition: attachment; filename=out.csv');
header('Content-Transfer-Encoding: binary');
header('Connection: Keep-Alive');
header('Expires: 0');
header('Cache-Control: must-revalidate, post-check=0, pre-check=0');
header('Pragma: public');
header('Content-Length: ' . strlen($data));
echo $_REQUEST['data'];
exit();
데이터의 zip 파일을 다음과 같이 만들 수도 있습니다.
<?php
$file = tempnam("tmp", "zip");
$zip = new ZipArchive();
$zip->open($file, ZipArchive::OVERWRITE);
$zip->addFromString('test.csv', $_REQUEST['data']);
$zip->close();
header('Content-Type: application/zip');
header('Content-Length: ' . filesize($file));
header('Content-Disposition: attachment; filename="file.zip"');
readfile($file);
unlink($file);
가장 좋은 점은 모든 파일이 즉시 생성되고 파기되므로 서버에 남아 있는 파일이 남지 않는다는 것입니다.
let args = {"data":htmlData,"filename":exampleName}
HTML 파일을 생성하여 다운로드하려면
window.downloadHTML = function(args) {
var data, filename, link;
var csv = args.data;
if (csv == null) return;
filename = args.filename || 'report.html';
data = 'data:text/html;charset=utf-8,' + encodeURIComponent(csv);
console.log(data);
link = document.createElement('a');
link.setAttribute('href', data);
link.setAttribute('download', filename);
document.body.appendChild(link);
link.click();
document.body.removeChild(link);}
CSV를 작성 및 다운로드하려면
window.downloadCSV = function(args) {
var data, filename, link;
var csv = args.data;
if (csv == null) return;
filename = args.filename || 'report.csv';
if (!csv.match(/^data:text\/csv/i)) {
csv = 'data:text/csv;charset=utf-8,' + csv;
}
data = encodeURI(csv);
link = document.createElement('a');
link.setAttribute('href', data);
link.setAttribute('download', filename);
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
서버측과 클라이언트측(Web 앱)의 양쪽에서 실행할 필요가 있습니다.
합니다.Content-Disposition https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Dispositionhttpsdeveloper.mozilla.org/en-US/docs/Web/HTTP/Headers/
// nodejs express
res.set('Content-Disposition', `attachment; filename="${self.creationName}"`)
위의 헤더를 사용하면 서버는 브라우저에 응답이 파일이며 지정된 이름으로 다운로드하여 저장해야 함을 알립니다.그렇지 않으면 브라우저는 파일을 "attachments (1).zip"과 같은 형식으로 저장할 수 있습니다.
다음으로 클라이언트를 보고 앵커링크를 생성하여 자동으로 클릭합니다.
function downloadThroughAnchorLink(downloadUrl: string, fileName: string) {
const a = document.createElement('a')
a.href = downloadUrl;
// We provided a header called Content-Disposition so we dont need to set "a.download" here
// a.download = fileName || 'download'
a.click()
}
그 정도면 됐다.
2013년 12월 30일에 히테쉬에 의해 제출된 답변은 사실 효과가 있다.약간의 조정만 하면 됩니다.
PHP 파일은 자신을 호출할 수 있습니다.즉, saveAs.php라는 이름의 파일을 만들고 이 코드를 여기에 넣으면 됩니다.
<a href="saveAs.php?file_source=YourDataFile.pdf">Download pdf here</a>
<?php
if (isset($_GET['file_source'])) {
$fullPath = $_GET['file_source'];
if($fullPath) {
$fsize = filesize($fullPath);
$path_parts = pathinfo($fullPath);
$ext = strtolower($path_parts["extension"]);
switch ($ext) {
case "pdf":
header("Content-Disposition: attachment; filename=\"".$path_parts["basename"]."\""); // use 'attachment' to force a download
header("Content-type: application/pdf"); // add here more headers for diff. extensions
break;
default;
header("Content-type: application/octet-stream");
header("Content-Disposition: filename=\"".$path_parts["basename"]."\"");
}
if($fsize) {//checking if file size exist
header("Content-length: $fsize");
}
readfile($fullPath);
exit;
}
}
?>
주의: 일부 브라우저에서는 지원되지 않습니다.
처음부터 파일 URL을 href 속성으로 설정하지 않고 jquery를 사용하여 파일을 다운로드하는 방법을 찾고 있었습니다.
jQuery('<a/>', {
id: 'downloadFile',
href: 'http://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png',
style: 'display:hidden;',
download: ''
}).appendTo('body');
$("#downloadFile")[0].click();<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>JQuery 없이 @rakaloof의 솔루션을 사용하고 있습니다(여기서는 필요없기 때문에).아이디어 감사합니다!여기 바닐라 있습니다JS 폼 기반 솔루션:
const uri = 'https://upload.wikimedia.org/wikipedia/commons/b/bb/Test_ogg_mp3_48kbps.wav';
let form = document.createElement("form");
form.setAttribute('action', uri);
document.body.appendChild(form);
form.submit();
document.body.removeChild(document.body.lastElementChild);언급URL : https://stackoverflow.com/questions/3749231/download-file-using-javascript-jquery
반응형
'programing' 카테고리의 다른 글
| "org.mariadb.jdbc"라는 이름의 JBOSS 드라이버.드라이버"가 인스톨 되어 있지 않다. (0) | 2022.11.21 |
|---|---|
| mysql은 어디에 데이터를 저장합니까? (0) | 2022.11.21 |
| ES6 클래스 기반의 React 컴포넌트와 기능적인 ES6 React 컴포넌트를 사용하는 경우 (0) | 2022.11.02 |
| Python에서 None이면 기본값을 반환하는 약어가 있나요? (0) | 2022.11.02 |
| AttributeError: 'datetime' 모듈에 'strptime' 특성이 없습니다. (0) | 2022.11.02 |