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




동영상 html (15)

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


Answers

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

앞서 언급했듯이 파일 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()

나에게 이것은 동일한 파일 이름과 확장명이 다운로드되어 완벽하게 작동했다.

<a href={"data:application/octet-stream;charset=utf-16le;base64," + file64 } download={title} >{title}</a>

'title'은 확장명이 sample.pdf , waterfall.jpg 등의 파일 이름입니다.

'file64'는이 즉, 같은 base64로 콘텐츠 뭔가 Ww6IDEwNDAsIFNsaWRpbmdTY2FsZUdyb3VwOiAiR3JvdXAgQiIsIE1lZGljYWxWaXNpdEZsYXRGZWU6IDM1LCBEZW50YWxQYXltZW50UGVyY2VudGFnZTogMjUsIFByb2NlZHVyZVBlcmNlbnQ6IDcwLKCFfSB7IkdyYW5kVG90YWwiOjEwNDAsIlNsaWRpbmdTY2FsZUdyb3VwIjoiR3JvdXAgQiIsIk1lZGljYWxWaXNpdEZsYXRGZWUiOjM1LCJEZW50YWxQYXltZW50UGVyY2VudGFnZSI6MjUsIlByb2NlZHVyZVBlcmNlbnQiOjcwLCJDcmVhdGVkX0J5IjoiVGVycnkgTGVlIiwiUGF0aWVudExpc3QiOlt7IlBhdGllbnRO


행복하게 FileSaver.js 사용하고 있습니다. 호환성은 꽤 좋으며 (IE10 이상 등), 사용하기가 매우 쉽습니다.

var blob = new Blob(["some text"], {
    type: "text/plain;charset=utf-8;",
});
saveAs(blob, "thing.txt");

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

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

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


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

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



데이터 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 데모를 사용해보십시오.


위의 모든 예제는 크롬과 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);

다음 방법은 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가 있습니다.


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

파일에 텍스트 데이터가 포함되어 있다면 텍스트 영역에 텍스트를 넣고 사용자가 텍스트 영역을 클릭 한 다음 Ctrl-A를 누른 다음 텍스트 편집기에 붙여 텍스트를 복사하게하는 기술을 사용합니다.


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

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

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

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

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


Node.js에 대해 굉장한 것을 요약 해 봤습니다. 제 생각에 Node.js는 브라우저에서 서버로의 지속적인 연결을 유지하려는 응용 프로그램에 특히 적합합니다. "long-polling" 이라고 알려진 기술을 사용하면 업데이트를 사용자에게 실시간으로 보내는 응용 프로그램을 작성할 수 있습니다. Ruby on Rails 또는 Django 와 같은 많은 웹 거인에서 긴 폴링을 수행하면 각 활성 클라이언트가 하나의 서버 프로세스를 사용하기 때문에 서버에 엄청난 부하가 발생합니다. 이 상황은 tarpit 공격에 해당합니다. Node.js와 같은 것을 사용할 때 서버는 열려있는 각 연결에 대해 별도의 스레드를 유지할 필요가 없습니다.

즉, Node.js에 브라우저 기반 채팅 응용 프로그램 을 만들면 수많은 클라이언트에 서비스 할 수있는 시스템 리소스가 거의 필요하지 않습니다. 이런 종류의 긴 폴링을 원할 때 Node.js는 훌륭한 옵션입니다.

루비와 파이썬 모두 이런 종류의 일을 처리 할 수있는 도구 ( eventmachinetwisted )를 가지고 있지만, Node.js는 예외적으로 잘하고, 처음부터 그렇게합니다. JavaScript는 예외적으로 콜백 기반 동시성 모델에 매우 적합하며 여기서는 탁월합니다. 또한 클라이언트와 서버 모두에 JSON 네이티브를 사용하여 직렬화 및 비 직렬화 할 수 있다는 것은 꽤 멋진 일입니다.

나는 다른 대답을 여기서 읽기를 고대한다. 이것은 환상적인 질문이다.

Node.js는 클라이언트 / 서버 갭에서 많은 코드를 재사용 할 때도 유용 할 수 있습니다. Meteor 프레임 워크를 사용하면이 작업이 매우 쉽습니다. 많은 사람들이 이것이 웹 개발의 미래라고 제안합니다. Meteor에서 코드를 작성하는 것은 매우 재미 있습니다. 많은 부분에서 데이터 재구성 방법을 생각하는 데 소요되는 시간을 줄이면 브라우저에서 실행되는 코드를 쉽게 수행 할 수 있습니다. 그것을 조작하고 그것을 다시 전달하십시오.

다음은 피라미드와 롱 폴링에 대한 기사입니다.이 게시물은 gevent에서 약간의 도움으로 설정하기 쉽습니다. TicTacToe와 Long Polling with Pyramid .





javascript file web-applications client-side