JavaScript 만 사용하여 파일에 데이터를 쓸 수 있습니까?

JavaScript를 사용하여 기존 파일에 데이터를 쓰고 싶습니다. 콘솔에서 인쇄하고 싶지 않습니다. 실제로에 데이터를 쓰고 싶습니다 abc.txt. 나는 많은 대답을 읽었지만 콘솔에서 인쇄되는 모든 곳을 읽었습니다. 어떤 곳에서는 코드를 주었지만 작동하지 않습니다. 따라서 실제로 파일에 데이터를 쓰는 방법을 알려주십시오.

코드를 참조했지만 작동하지 않습니다 : 오류 제공 :

잡히지 않은 TypeError : 잘못된 생성자

크롬과

SecurityError : 작업이 안전하지 않습니다.

Mozilla에서

var f = "sometextfile.txt";

writeTextFile(f, "Spoon")
writeTextFile(f, "Cheese monkey")
writeTextFile(f, "Onion")

function writeTextFile(afilename, output)
{
  var txtFile =new File(afilename);
  txtFile.writeln(output);
  txtFile.close();
}

Javascript 만 사용하거나 NOT을 사용하여 데이터를 파일에 실제로 쓸 수 있습니까?

이것에 대한 몇 가지 제안-

1. 클라이언트 시스템에서 파일을 쓰려고 시도하는 경우 브라우저 간 방식으로 파일을 작성할 수 없습니다. IE에는 "신뢰할 수있는"응용 프로그램이 ActiveX 개체를 사용하여 파일을 읽고 쓸 수 있도록하는 방법이 있습니다.
2. 서버에 저장하려는 경우 텍스트 데이터를 서버로 전달하고 서버 측 언어를 사용하여 파일 쓰기 코드를 실행하십시오.
3. 클라이언트 쪽에서 상당히 작은 정보를 저장하기 위해 쿠키를 사용할 수 있습니다.
4. 로컬 스토리지에 HTML5 API 사용

다음을 사용하여 브라우저에서 파일을 만들 수 있습니다 Blob및 URL.createObjectURL. 모든 최신 브라우저 에서이 기능을 지원합니다 .

방대한 보안 문제가 발생할 수 있으므로 직접 만든 파일을 저장할 수는 없지만 사용자에게 다운로드 링크로 제공 할 수 있습니다. 다운로드 속성을 지원하는 브라우저에서 링크 download속성 을 통해 파일 이름을 제안 할 수 있습니다 . 다른 다운로드와 마찬가지로 파일을 다운로드하는 사용자는 파일 이름에 대한 최종 결정을 내립니다.

var textFile = null,
  makeTextFile = function (text) {
    var data = new Blob([text], {type: 'text/plain'});

    // If we are replacing a previously generated file we need to
    // manually revoke the object URL to avoid memory leaks.
    if (textFile !== null) {
      window.URL.revokeObjectURL(textFile);
    }

    textFile = window.URL.createObjectURL(data);

    // returns a URL you can use as a href
    return textFile;
  };

다음 은이 기술을 사용하여에서 임의의 텍스트를 저장 하는 예 입니다 textarea.

사용자가 링크를 클릭하지 않고 다운로드를 즉시 시작하려는 경우 Lifecube 의 답변 처럼 마우스 이벤트를 사용하여 링크에서 마우스 클릭을 시뮬레이션 할 수 있습니다 . 이 기술을 사용 하는 업데이트 된 예제 를 만들었습니다 .

  var create = document.getElementById('create'),
    textbox = document.getElementById('textbox');

  create.addEventListener('click', function () {
    var link = document.createElement('a');
    link.setAttribute('download', 'info.txt');
    link.href = makeTextFile(textbox.value);
    document.body.appendChild(link);

    // wait for the link to be added to the document
    window.requestAnimationFrame(function () {
      var event = new MouseEvent('click');
      link.dispatchEvent(event);
      document.body.removeChild(link);
    });

  }, false);

브라우저 JavaScript에 대해 이야기하는 경우 보안상의 이유로 로컬 파일에 직접 데이터를 쓸 수 없습니다. HTML 5의 새로운 API는 파일을 읽을 수만 있습니다.

그러나 데이터를 쓰려면 사용자가 파일을 로컬로 다운로드 할 수있게하십시오. 다음 코드가 작동합니다.

    function download(strData, strFileName, strMimeType) {
    var D = document,
        A = arguments,
        a = D.createElement("a"),
        d = A[0],
        n = A[1],
        t = A[2] || "text/plain";

    //build download link:
    a.href = "data:" + strMimeType + "charset=utf-8," + escape(strData);


    if (window.MSBlobBuilder) { // IE10
        var bb = new MSBlobBuilder();
        bb.append(strData);
        return navigator.msSaveBlob(bb, strFileName);
    } /* end if(window.MSBlobBuilder) */



    if ('download' in a) { //FF20, CH19
        a.setAttribute("download", n);
        a.innerHTML = "downloading...";
        D.body.appendChild(a);
        setTimeout(function() {
            var e = D.createEvent("MouseEvents");
            e.initMouseEvent("click", true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
            a.dispatchEvent(e);
            D.body.removeChild(a);
        }, 66);
        return true;
    }; /* end if('download' in a) */



    //do iframe dataURL download: (older W3)
    var f = D.createElement("iframe");
    D.body.appendChild(f);
    f.src = "data:" + (A[2] ? A[2] : "application/octet-stream") + (window.btoa ? ";base64" : "") + "," + (window.btoa ? window.btoa : escape)(strData);
    setTimeout(function() {
        D.body.removeChild(f);
    }, 333);
    return true;
}

그것을 사용하려면 :

download('the content of the file', 'filename.txt', 'text/plain');

위의 답변은 유용하지만 버튼 클릭시 직접 텍스트 파일을 다운로드하는 데 도움이 되는 코드 를 찾았습니다 . 이 코드에서 filename원하는대로 변경할 수도 있습니다 . HTML5의 순수한 자바 스크립트 함수입니다. 나를 위해 작동합니다!

function saveTextAsFile()
{
    var textToWrite = document.getElementById("inputTextToSave").value;
    var textFileAsBlob = new Blob([textToWrite], {type:'text/plain'});
    var fileNameToSaveAs = document.getElementById("inputFileNameToSaveAs").value;
      var downloadLink = document.createElement("a");
    downloadLink.download = fileNameToSaveAs;
    downloadLink.innerHTML = "Download File";
    if (window.webkitURL != null)
    {
        // Chrome allows the link to be clicked
        // without actually adding it to the DOM.
        downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob);
    }
    else
    {
        // Firefox requires the link to be added to the DOM
        // before it can be clicked.
        downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
        downloadLink.onclick = destroyClickedElement;
        downloadLink.style.display = "none";
        document.body.appendChild(downloadLink);
    }

    downloadLink.click();
}

시험

let a = document.createElement('a');
a.href = "data:application/octet-stream,"+encodeURIComponent("My DATA");
a.download = 'abc.txt';
a.click();

새로운 Blob솔루션 을 사용하는 것이 불가능한 경우 , 최신 브라우저에서 최상의 솔루션을 보장하기 위해 파일 크기에 제한이있는이 간단한 접근 방식을 여전히 사용할 수 있습니다.

function download() {
                var fileContents=JSON.stringify(jsonObject, null, 2);
                var fileName= "data.json";

                var pp = document.createElement('a');
                pp.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(fileContents));
                pp.setAttribute('download', fileName);
                pp.click();
            }
            setTimeout(function() {download()}, 500);

$('#download').on("click", function() {
  function download() {
    var jsonObject = {
      "name": "John",
      "age": 31,
      "city": "New York"
    };
    var fileContents = JSON.stringify(jsonObject, null, 2);
    var fileName = "data.json";

    var pp = document.createElement('a');
    pp.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(fileContents));
    pp.setAttribute('download', fileName);
    pp.click();
  }
  setTimeout(function() {
    download()
  }, 500);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="download">Download me</button>

위의 사용자 @ useless-code ( https://stackoverflow.com/a/21016088/327386 )의 코드 를 사용하여 파일을 생성하십시오. 파일을 자동으로 다운로드하려면 textFile방금 생성 된 파일을이 함수로 전달하십시오 .

var downloadFile = 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;
}

나는 여기에 좋은 대답을 찾았지만 더 간단한 방법도 찾았습니다.

링크 요소는 onclick 속성을 가질 수 있으므로 Blob 및 다운로드 링크를 작성하는 단추를 하나의 링크로 결합 할 수 있습니다. (반대에 불가능한 것 같습니다. 버튼에 href를 추가해도 작동하지 않습니다.)

bootstrap스타일링을 제외하고 순수한 자바 스크립트 인을 사용하여 링크를 버튼으로 스타일을 지정할 수 있습니다 .

버튼과 다운로드 링크를 결합하면 추악한 getElementById호출이 덜 필요 하므로 코드가 줄어 듭니다 .

이 예제는 단 한 번의 클릭만으로 텍스트 블롭을 작성하고 다운로드 할 수 있습니다.

<a id="a_btn_writetofile" download="info.txt" href="#" class="btn btn-primary" 
   onclick="exportFile('This is some dummy data.\nAnd some more dummy data.\n', 'a_btn_writetofile')"
>
   Write To File
</a>

<script>
    // URL pointing to the Blob with the file contents
    var objUrl = null;
    // create the blob with file content, and attach the URL to the downloadlink; 
    // NB: link must have the download attribute
    // this method can go to your library
    function exportFile(fileContent, downloadLinkId) {
        // revoke the old object URL to avoid memory leaks.
        if (objUrl !== null) {
            window.URL.revokeObjectURL(objUrl);
        }
        // create the object that contains the file data and that can be referred to with a URL
        var data = new Blob([fileContent], { type: 'text/plain' });
        objUrl = window.URL.createObjectURL(data);
        // attach the object to the download link (styled as button)
        var downloadLinkButton = document.getElementById(downloadLinkId);
        downloadLinkButton.href = objUrl;
    };
</script>

네 가능합니다 여기 코드는

const fs = require('fs') 
let data = "Learning how to write in a file."
fs.writeFile('Output.txt', data, (err) => { 
      
    // In case of a error throw err. 
    if (err) throw err; 
})