Есть ли способ, которым я могу создать текстовый файл на стороне клиента и предложить пользователю загрузить его, без каких-либо взаимодействие с сервером? Я знаю, что не могу написать напрямую на их машину (безопасность и все), но могу ли я создать и предложить им сохранить ее?

Вы можете использовать URI данных. Поддержка браузера может варьироваться ; см. Код ключа Википедии . Пример:

<a href="data:application/octet-stream;charset=utf-16le;base64,//5mAG8AbwAgAGIAYQByAAoA">text file</a>

Поток октетов должен вызвать запрос на загрузку. В противном случае он, вероятно, откроется в браузере.

который не определен в

<a href="data:application/octet-stream,field1,field2
foo,bar
goo,gai
">CSV Octet</a>

Попробуйте раздел jsFiddle demo Глядя на вывод

Простое решение для браузеров, готовых к 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, 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);
    }
}

Обратите внимание, что, в зависимости от вашей ситуации, вы также можете позвонить URL.revokeObjectURL после удаления elem. Согласно документам для Вам нужно проверить состояние 0 (как при локальной загрузке файлов с :

Каждый раз, когда вы вызываете createObjectURL (), создается новый URL объекта, даже если вы его уже создали для того же объекта. Каждый из них должен быть освобожден путем вызова URL.revokeObjectURL (), когда они вам больше не нужны. Браузеры выпускают их автоматически, когда документ выгружается ;, однако для оптимальной производительности и использования памяти, если есть безопасные времена, когда вы можете явно выгружать их, вы должны сделать это.

. Все вышеприведенные примеры прекрасно работают в chrome и 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 не поддерживает его в целях безопасности.

)?

Это решение извлечено непосредственно из репозитория gidub tiddlywiki (tiddlywiki.com). Я использовал 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: Модуль загрузки заставки

, который обсуждает это.

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

Если вы просто хотите преобразовать строку, чтобы быть доступной для загрузки, вы можете попробовать это с помощью jQuery. ,

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

Как упоминалось ранее, файловой заставки Попробуйте этот инструмент StreamSaver.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()

По состоянию на апрель 2014 года API-интерфейсы FileSytem могут быть не стандартизированы в W3C. Думаю, любой, кто смотрит на решение с помощью blob, должен быть осторожен.

HTML5 взорвется,

для всех или

на основе ответа @Rick, который был действительно полезен.

, переданную в data Проблема в том, что двойные экранированные метасимволы утомительны. Существует один способ передать строку в

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

`Извините, я не могу комментировать ответ @ Рика из-за моя текущая низкая репутация в StackOverflow.

массив было передано и отклонено. Есть ли простой способ взять строку HTML в JavaScript и удалить HTML?

jQuery Form Plugin Если вы работаете в браузере, то проще всего просто из github.com/kennethjiang/js-file-download все же

Просмотр исходного кода чтобы увидеть, как используются методы, упомянутые на этой странице.

Установка

yarn add js-file-download
npm install --save js-file-download

Использование

import fileDownload from 'js-file-download'

// fileDownload(data, filename, mime)
// mime is optional

fileDownload(data, 'filename.csv', 'text/csv')

этом сообщении в блоге о присвоении имени загрузке при использовании URI , когда шаблон должен быть создан на лету, как в следующем фрагменте: Глядя на вывод

Эта функция ниже работает.

 private createDownloadableCsvFile(fileName, content) {
   let link = document.createElement("a");
   link.download = fileName;
   link.href = `data:application/octet-stream,${content}`;
   return link;
 }

Это будет эквивалентно

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

‘title’ — это имя файла с расширением, т. Е. sample.pdf, waterfall.jpg Мое решение для Safari с jQuery и jQuery-ui:

Если файл содержит текстовые данные, я использую методику поместите текст в элемент textarea и попросите пользователя выбрать его (щелкните в textarea, затем ctrl-A), затем скопируйте и вставьте в текстовый редактор. Ww6IDEwNDAsIFNsaWRpbmdTY2FsZUdyb3VwOiAiR3JvdXAgQiIsIE1lZGljYWxWaXNpdEZsYXRGZWU6IDM1LCBEZW50YWxQYXltZW50UGVyY2VudGFnZTogMjUsIFByb2NlZHVyZVBlcmNlbnQ6IDcwLKCFfSB7IkdyYW5kVG90YWwiOjEwNDAsIlNsaWRpbmdTY2FsZUdyb3VwIjoiR3JvdXAgQiIsIk1lZGljYWxWaXNpdEZsYXRGZWUiOjM1LCJEZW50YWxQYXltZW50UGVyY2VudGFnZSI6MjUsIlByb2NlZHVyZVBlcmNlbnQiOjcwLCJDcmVhdGVkX0J5IjoiVGVycnkgTGVlIiwiUGF0aWVudExpc3QiOlt7IlBhdGllbnRO

Shog9

Это действительно возможно — используйте Flash.

так .. вот моя отредактированная версия, используя

Пожалуйста, взгляните на Вы можете использовать мой плагин для этой цели. javascript — JQuery — $ не определен — Переполнение стека