Можно ли записывать данные в файл только с помощью JavaScript?

Ответ 1

Некоторые предложения для этого -

• Если вы пытаетесь записать файл на клиентской машине, вы не можете сделать это в любом браузере. У IE есть методы, позволяющие "доверенным" приложениям использовать объекты ActiveX для чтения/записи файла.
• Если вы пытаетесь сохранить его на своем сервере, просто передайте текстовые данные на свой сервер и выполните код записи файла с использованием некоторого языка на стороне сервера.
• Чтобы сохранить некоторую информацию на стороне клиента, которая значительно мала, вы можете использовать файлы cookie.
• Использование API HTML5 для локального хранилища.

Ответ 2

Вы можете создавать файлы в браузере, используя 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);

Ответ 3

Если вы говорите о javascript браузера, вы не можете напрямую записывать данные в локальный файл по соображениям безопасности. Новый API HTML 5 может позволить вам читать файлы.

Но если вы хотите записать данные и разрешить загрузку пользователя в качестве файла на локальный. работает следующий код:

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

Ответ 4

Выше ответ полезен, но нашел код, который поможет вам скачать текстовый файл непосредственно при нажатии кнопки.      В этом коде вы также можете изменить filename по своему усмотрению. Это чистая функция javascript с 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();
}

Ответ 5

В случае, если не использовать новое решение Blob, это, безусловно, лучшее решение в современном браузере, все же можно использовать этот более простой подход, который имеет предел в размер файла, кстати:

  function загрузить() {               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 (функция() {скачать()}, 500);
Код>

  $('# download'). on ("click", function() {
 function загрузить() {
   var jsonObject = {
      "имя": "Джон",
      "возраст": 31,
      "город": "Нью-Йорк" 
   };
   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() {
   скачать()
 }, 500);
});Код>

  < script src= "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" > < &/сценарий; GT
< button id = "загрузить" > Скачайте </button>

Ответ 6

Используйте код user @noeless-code выше (fooobar.com/questions/59331/...), чтобы сгенерировать файл. Если вы хотите загрузить файл автоматически, передайте 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;
}

Ответ 7

Я нашел хорошие ответы здесь, но также нашел более простой способ.

Кнопка для создания большого двоичного объекта и ссылки для скачивания может быть объединена в одну ссылку, поскольку элемент ссылки может иметь атрибут onclick. (Обратное кажется невозможным, добавление ссылки к кнопке не работает.)

Вы можете стилизовать ссылку как кнопку с помощью bootstrap, которая по-прежнему является чистым JavaScript, за исключением стилизации.

Комбинация кнопки и ссылки на скачивание также уменьшает код, так как требуется меньше таких уродливых вызовов 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>

Ответ 8

Пытаться

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