클라이언트 쪽에서 텍스트 파일을 만들어 서버와 상호 작용하지 않고 다운로드하라는 메시지를 표시 할 수있는 방법이 있습니까? 컴퓨터에 직접 쓸 수는 없지만 (보안 및 모두), 저장하고 작성하라는 메시지를 표시 할 수 있습니까?
답변
데이터 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!');답변
위의 모든 솔루션이 모든 브라우저에서 작동하지는 않았습니다. 여기에 마지막으로 (그리고 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 ()을 호출하여 각 릴리스를 해제해야합니다. 브라우저는 문서가 언로드 될 때 자동으로이를 해제합니다. 그러나 최적의 성능과 메모리 사용을 위해 명시 적으로 언로드 할 수있는 안전한 시간이 있으면 그렇게해야합니다.
답변
위의 모든 예제는 크롬과 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 :
다운로드 세이버 모듈
