[javascript] 서버를 통하지 않고 사용자가 다운로드 할 수 있도록 메모리에 파일을 만듭니다.


7 Answers

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!');
Question

클라이언트 측에서 텍스트 파일을 만들고 서버와 상호 작용하지 않고 다운로드하라는 메시지가 표시되는 방법이 있습니까? 내가 자신의 컴퓨터 (보안 및 모든)에 직접 쓸 수는 없지만 만들고 저장할 수 있습니까?




이 솔루션은 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 : 다운로드 보호기 모듈




var element = document.createElement('a');
element.setAttribute('href', 'data:text/text;charset=utf-8,' +      encodeURI(data));
element.setAttribute('download', "fileName.txt");
element.click();



위의 모든 해결책은 모든 브라우저에서 작동하지 않았습니다. 다음은 IE 10 이상, Firefox 및 Chrome (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);
    }
}

상황에 따라 elem 을 제거한 후 URL.revokeObjectURL 을 호출 할 수도 있습니다. URL.createObjectURL 에 대한 문서에 따르면

createObjectURL ()을 호출 할 때마다 동일한 객체에 대한 객체 URL을 이미 생성 한 경우에도 새 객체 URL이 만들어집니다. 이들 각각은 더 이상 URL.revokeObjectURL ()을 호출하여 해제해야합니다. 브라우저는 문서가 언로드 될 때 자동으로이를 해제합니다. 그러나 최적의 성능 및 메모리 사용을 위해 명시 적으로 언로드 할 수있는 안전 시간이있는 경우 그렇게해야합니다.




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()



정말 도움이 된 @ 릭 대답을 바탕으로.

이런 방식으로 공유하려면 문자열 data 를 scape해야합니다.

$('a.download').attr('href', 'data:application/csv;charset=utf-8,'+ encodeURI(data));

`미안 의 현재 낮은 평판 때문에 @ Rick의 대답에 대해 언급 할 수 없습니다.

수정 제안 이 공유되어 거부되었습니다.




실제로 플래시를 사용할 수 있습니다.

JS로 콘텐츠를 생성 한 다음 플래시 바를 초기화하거나 플래시 무비 내에서 모든 작업을 수행 할 수 있습니다.

몇 가지 중요한 발언에 대해 살펴보십시오.




다음 방법은 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는 보안 목적으로이를 지원하지 않습니다.

반면에 IE에는 파일을 만들고 다운로드하는 데 사용할 수있는 BLOB를 저장하는 API가 있습니다.




Related