답변:
데이터 URI를 사용할 수 있습니다. 브라우저 지원은 다양합니다. Wikipedia를 참조하십시오 . 예:
<a href="data:application/octet-stream;charset=utf-16le;base64,//5mAG8AbwAgAGIAYQByAAoA">text file</a>옥텟 스트림은 다운로드 프롬프트를 강제하는 것입니다. 그렇지 않으면 아마도 브라우저에서 열립니다.
CSV의 경우 다음을 사용할 수 있습니다.
<a href="data:application/octet-stream,field1%2Cfield2%0Afoo%2Cbar%0Agoo%2Cgai%0A">CSV Octet</a>jsFiddle 데모를 사용해보십시오 .
HTML5 지원 브라우저를위한 간단한 솔루션 ...
function download(filename, text) {
var element = document.createElement('a');
element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
element.setAttribute('download', filename);
element.style.display = 'none';
document.body.appendChild(element);
element.click();
document.body.removeChild(element);
}form * {
display: block;
margin: 10px;
}<form onsubmit="download(this['name'].value, this['text'].value)">
<input type="text" name="name" value="test.txt">
<textarea name="text"></textarea>
<input type="submit" value="Download">
</form>용법
download('test.txt', 'Hello world!');download속성을 사용하면 파일 이름을 지정할 수 있습니다 ;-)
txt파일 이름에 확장자를 제공하지 않으면 Chrome은 확장자 만 추가합니다 . 그렇게 download("data.json", data)하면 예상대로 작동합니다.
위의 모든 솔루션이 모든 브라우저에서 작동하지는 않았습니다. 여기에 마지막으로 (그리고 IE 10 +, 파이어 폭스와 크롬에서 작동 무엇 없이 jQuery를 또는 다른 라이브러리) :
save: function(filename, data) {
var blob = new Blob([data], {type: 'text/csv'});
if(window.navigator.msSaveOrOpenBlob) {
window.navigator.msSaveBlob(blob, filename);
}
else{
var elem = window.document.createElement('a');
elem.href = window.URL.createObjectURL(blob);
elem.download = filename;
document.body.appendChild(elem);
elem.click();
document.body.removeChild(elem);
}
}상황에 따라를 제거한 후 URL.revokeObjectURL 을 호출 할 수도 있습니다 elem. URL.createObjectURL 에 대한 문서에 따르면 :
createObjectURL ()을 호출 할 때마다 동일한 객체에 대해 이미 생성 한 경우에도 새 객체 URL이 생성됩니다. 더 이상 필요하지 않은 경우 URL.revokeObjectURL ()을 호출하여 각 릴리스를 해제해야합니다. 브라우저는 문서가 언로드 될 때 자동으로이를 해제합니다. 그러나 최적의 성능과 메모리 사용을 위해 명시 적으로 언로드 할 수있는 안전한 시간이 있으면 그렇게해야합니다.
Failed: network errorChrome으로 이어졌습니다 . 이것은 잘 작동합니다.
위의 모든 예제는 크롬과 IE에서 잘 작동하지만 Firefox에서는 실패합니다. 본체에 앵커를 추가하고 클릭 후 제거하는 것을 고려하십시오.
var a = window.document.createElement('a');
a.href = window.URL.createObjectURL(new Blob(['Test,Text'], {type: 'text/csv'}));
a.download = 'test.csv';
// Append anchor to body.
document.body.appendChild(a);
a.click();
// Remove anchor from body
document.body.removeChild(a);FileSaver.js를 행복하게 사용하고 있습니다. 호환성이 뛰어나고 (IE10 + 및 그 밖의 모든 것), 사용하기 매우 간단합니다 :
var blob = new Blob(["some text"], {
type: "text/plain;charset=utf-8;",
});
saveAs(blob, "thing.txt");다음 방법은 IE11 +, Firefox 25+ 및 Chrome 30+에서 작동합니다.
<a id="export" class="myButton" download="" href="#">export</a>
<script>
function createDownloadLink(anchorSelector, str, fileName){
if(window.navigator.msSaveOrOpenBlob) {
var fileData = [str];
blobObject = new Blob(fileData);
$(anchorSelector).click(function(){
window.navigator.msSaveOrOpenBlob(blobObject, fileName);
});
} else {
var url = "data:text/plain;charset=utf-8," + encodeURIComponent(str);
$(anchorSelector).attr("download", fileName);
$(anchorSelector).attr("href", url);
}
}
$(function () {
var str = "hi,file";
createDownloadLink("#export",str,"file.txt");
});
</script>동작에서 이것을보십시오 : http://jsfiddle.net/Kg7eA/
Firefox 및 Chrome은 탐색을 위해 데이터 URI를 지원하므로 데이터 URI로 이동하여 파일을 만들 수 있지만 IE는 보안 목적으로 파일 URI를 지원하지 않습니다.
반면, IE에는 Blob을 저장하기위한 API가 있으며 파일을 만들고 다운로드하는 데 사용할 수 있습니다.
이 솔루션은 tiddlywiki (tiddlywiki.com) github 저장소에서 직접 추출됩니다. 거의 모든 브라우저에서 tiddlywiki를 사용했으며 매력처럼 작동합니다.
function(filename,text){
// Set up the link
var link = document.createElement("a");
link.setAttribute("target","_blank");
if(Blob !== undefined) {
var blob = new Blob([text], {type: "text/plain"});
link.setAttribute("href", URL.createObjectURL(blob));
} else {
link.setAttribute("href","data:text/plain," + encodeURIComponent(text));
}
link.setAttribute("download",filename);
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}Github Repo : 다운로드 세이버 모듈
IE10에서 작동하는 솔루션 : (CSV 파일이 필요했지만 유형과 파일 이름을 txt로 변경하면 충분합니다)
var csvContent=data; //here we load our csv data
var blob = new Blob([csvContent],{
type: "text/csv;charset=utf-8;"
});
navigator.msSaveBlob(blob, "filename.csv")다운로드 가능한 문자열을 변환하려면 jQuery를 사용하여 시도하십시오.
$('a.download').attr('href', 'data:application/csv;charset=utf-8,' + encodeURI(data));패키지 의 js 파일 다운로드 에서 github.com/kennethjiang/js-file-download의 브라우저 지원에 대한 핸들 에지의 경우 :
소스보기이 페이지에서 언급 된 기술을 사용하는 방법을 보려면 를보십시오.
yarn add js-file-download
npm install --save js-file-downloadimport fileDownload from 'js-file-download'
// fileDownload(data, filename, mime)
// mime is optional
fileDownload(data, 'filename.csv', 'text/csv')앞에서 언급했듯이 filesaver 는 클라이언트 쪽에서 파일을 처리하기위한 훌륭한 패키지입니다. 그러나 큰 파일에는 적합하지 않습니다. StreamSaver.js 는 큰 파일을 처리 할 수있는 대체 솔루션입니다 (FileServer.js에 있음).
const fileStream = streamSaver.createWriteStream('filename.txt', size);
const writer = fileStream.getWriter();
for(var i = 0; i < 100; i++){
var uint8array = new TextEncoder("utf-8").encode("Plain Text");
writer.write(uint8array);
}
writer.close()var element = document.createElement('a');
element.setAttribute('href', 'data:text/text;charset=utf-8,' + encodeURI(data));
element.setAttribute('download', "fileName.txt");
element.click();2014 년 4 월 현재 FileSytem API는 W3C에서 표준화되지 않을 수 있습니다. 얼룩이있는 솔루션을 보는 사람은 조심스럽게 스레드해야합니다.
URL API, 특히 URL.createObjectURL () 및 Blob을 사용할 수 있습니다. API를 인코딩 및 다운로드 거의 아무것도.
다운로드가 작은 경우 다음과 같이 작동합니다.
document.body.innerHTML +=
`<a id="download" download="PATTERN.json" href="${URL.createObjectURL(new Blob([JSON.stringify("HELLO WORLD", null, 2)]))}"> Click me</a>`
download.click()
download.outerHTML = ""DOM을 사용하는 대신 다운로드가 크면 다운로드 매개 변수로 링크 요소를 작성하고 클릭을 트리거하는 것이 더 좋습니다.
링크 요소는 문서에 추가되지 않지만 클릭은 작동합니다. 이 방법으로 수백 개의 Mo를 다운로드 할 수 있습니다.
const stack = {
some: "stuffs",
alot: "of them!"
}
BUTTONDOWNLOAD.onclick = (function(){
let j = document.createElement("a")
j.id = "download"
j.download = "stack_"+Date.now()+".json"
j.href = URL.createObjectURL(new Blob([JSON.stringify(stack, null, 2)]))
j.click()
}) <button id="BUTTONDOWNLOAD">DOWNLOAD!</button>보너스! 순환 객체를 다운로드 하고 오류를 피하십시오.
TypeError : 순환 객체 값 (Firefox) TypeError : 변환 중
JSON에 대한 순환 구조 (Chrome 및 Opera) TypeError : Circular
값 인수에서 참조가 지원되지 않음 (에지)
https://github.com/douglascrockford/JSON-js/blob/master/cycle.js 사용
이 예에서는 document객체를 json으로 다운로드합니다 .
/* JSON.decycle */
if(typeof JSON.decycle!=="function"){JSON.decycle=function decycle(object,replacer){"use strict";var objects=new WeakMap();return(function derez(value,path){var old_path;var nu;if(replacer!==undefined){value=replacer(value)}
if(typeof value==="object"&&value!==null&&!(value instanceof Boolean)&&!(value instanceof Date)&&!(value instanceof Number)&&!(value instanceof RegExp)&&!(value instanceof String)){old_path=objects.get(value);if(old_path!==undefined){return{$ref:old_path}}
objects.set(value,path);if(Array.isArray(value)){nu=[];value.forEach(function(element,i){nu[i]=derez(element,path+"["+i+"]")})}else{nu={};Object.keys(value).forEach(function(name){nu[name]=derez(value[name],path+"["+JSON.stringify(name)+"]")})}
return nu}
return value}(object,"$"))}}
document.body.innerHTML +=
`<a id="download" download="PATTERN.json" href="${URL.createObjectURL(new Blob([JSON.stringify(JSON.decycle(document), null, 2)]))}"></a>`
download.click()URI를 사용 하는 경우 다운로드 이름 지정에 대한이 블로그 게시물에 설명 된대로 Chrome을 사용하는 것보다 URI를 사용하는 것보다 하나 더 잘 수행 할 수도 있습니다 .
아래 기능이 작동했습니다.
private createDownloadableCsvFile(fileName, content) {
let link = document.createElement("a");
link.download = fileName;
link.href = `data:application/octet-stream,${content}`;
return link;
}다음 방법은 IE10 +, Edge, Opera, FF 및 Chrome에서 작동합니다.
const saveDownloadedData = (fileName, data) => {
if(~navigator.userAgent.indexOf('MSIE') || ~navigator.appVersion.indexOf('Trident/')) { /* IE9-11 */
const blob = new Blob([data], { type: 'text/csv;charset=utf-8;' });
navigator.msSaveBlob(blob, fileName);
} else {
const link = document.createElement('a')
link.setAttribute('target', '_blank');
if(Blob !== undefined) {
const blob = new Blob([data], { type: 'text/plain' });
link.setAttribute('href', URL.createObjectURL(blob));
} else {
link.setAttribute('href', 'data:text/plain,' + encodeURIComponent(data));
}
~window.navigator.userAgent.indexOf('Edge')
&& (fileName = fileName.replace(/[&\/\\#,+$~%.'':*?<>{}]/g, '_')); /* Edge */
link.setAttribute('download', fileName);
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
}따라서 함수를 호출하십시오.
saveDownloadedData('test.txt', 'Lorem ipsum');나에게 이것은 동일한 파일 이름과 확장명이 다운로드되어 완벽하게 작동했습니다.
<a href={"data:application/octet-stream;charset=utf-16le;base64," + file64 } download={title} >{title}</a>
'제목'확장 예와 파일 이름입니다, sample.pdf, waterfall.jpg, 등
'file64'는 이와 같은 base64 콘텐츠입니다. Ww6IDEwNDAsIFNsaWRpbmdTY2FsZUdyb3VwOiAiR3JvdXAgQiIsIE1lZGljYWxWaXNpdEZsYXRGZWU6IDM1LCBEZW50YWxQYXltZW50UGVyY2VudGFnZTogMjUsIFByb2NlZHVyZVBlcmNlbnQ6IDcwLKCFfSB7IkdyYW5kVG90YWwiOjEwNDAsIlNsaWRpbmdTY2FsZUdyb3VwIjoiR3JvdXAgQiIsIk1lZGljYWxWaXNpdEZsYXRGZWUiOjM1LCJEZW50YWxQYXltZW50UGVyY2VudGFnZSI6MjUsIlByb2NlZHVyZVBlcmNlbnQiOjcwLCJDcmVhdGVkX0J5IjoiVGVycnkgTGVlIiwiUGF0aWVudExpc3QiOlt7IlBhdGllbnRO
<a></a>태그를 사용한 다음을 설정합니다 href='path'. 그런 다음 이미지를 <a>시각적으로 볼 수 있도록 요소 사이에 이미지를 배치 하십시오. 원하는 경우 href동일한 링크가 아니라 동적 이 되도록 변경하는 함수를 작성할 수 있습니다 .
자바 스크립트로 액세스 하려면 <a>태그에 태그를 지정하십시오 id.
HTML 버전으로 시작 :
<a href="mp3/tupac_shakur-how-do-you-want-it.mp3" download id="mp3Anchor">
<img src="some image that you want" alt="some description" width="100px" height="100px" />
</a>이제 JavaScript로 :
*Create a small json file*;
const array = [
"mp3/tupac_shakur-how-do-you-want-it.mp3",
"mp3/spice_one-born-to-die.mp3",
"mp3/captain_planet_theme_song.mp3",
"mp3/tenchu-intro.mp3",
"mp3/resident_evil_nemesis-intro-theme.mp3"
];
//load this function on window
window.addEventListener("load", downloadList);
//now create a function that will change the content of the href with every click
function downloadList() {
var changeHref=document.getElementById("mp3Anchor");
var j = -1;
changeHref.addEventListener("click", ()=> {
if(j < array.length-1) {
j +=1;
changeHref.href=""+array[j];
}
else {
alert("No more content to download");
}
}파일에 텍스트 데이터가 포함 된 경우, 내가 사용하는 기술은 텍스트를 텍스트 영역 요소에 넣고 사용자가 텍스트 영역을 클릭하고 (textarea를 클릭 한 다음 ctrl-A) 텍스트 편집기에 붙여 넣기를 수행하도록하는 것입니다.