Как создать файл в памяти для скачивания пользователем без использования сервера?

Вы можете использовать следующий простой код для создания функционала загрузки текста в файл с использованием 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;
}

HTML форма для ввода имени файла и текста, который нужно скачать:

<form onsubmit="download(this['name'].value, this['text'].value); return false;">
  <input type="text" name="name" value="test.txt">
  <textarea name="text"></textarea>
  <input type="submit" value="Download">
</form>

Пример использования функции:

download('test.txt', 'Hello world!');

Объяснение:

• Функция download создаёт ссылку, указывающую на данные в формате text/plain, и инициирует скачивание файла с указанным именем.
• Используя CSS, мы устанавливаем отображение всех элементов формы в блочный режим для улучшения читаемости и удобства.
• HTML форма принимает ввод имени файла и текстового содержимого, а также содержит кнопку для инициирования скачивания. Не забудьте в функции onsubmit добавить return false;, чтобы предотвратить перезагрузку страницы при отправке формы.

Ваш код работает корректно в Chrome и IE, но не функционирует в Firefox. Это связано с тем, что Firefox требует, чтобы элемент <a> был добавлен в документ, а затем на него нужно произвести клик, чтобы инициировать загрузку.

Попробуйте использовать следующий подход:

var a = document.createElement('a');
a.href = window.URL.createObjectURL(new Blob(['Test,Text'], {type: 'text/csv'}));
a.download = 'test.csv';

// Добавляем элемент <a> в тело документа
document.body.appendChild(a);

// Инициируем клик и запускаем загрузку
a.click();

// Удаляем элемент <a> из документа
document.body.removeChild(a);

Если данный код по-прежнему не работает, убедитесь, что ваши настройки безопасности не блокируют автоматическое создание ссылок для скачивания. Также отметьте, что в некоторых версиях Firefox может потребоваться явное разрешение на скачивание файлов.

Для того чтобы создать и скачать файл с помощью JavaScript в браузере, вы можете использовать следующий код:

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

// Начнем загрузку файла.
download("hello.txt","Это содержимое моего файла :)");

Объяснение кода:

1. Создание элемента <a>: мы создаем ссылку, которая будет использоваться для загрузки файла.
2. Установка атрибутов:
   • href содержит данные файла в формате data:text/plain;charset=utf-8, и кодированное содержимое, которое вы хотите сохранить.
   • download устанавливает имя файла, который будет загружен.
3. Скрытие элемента: элемент не будет видим на странице, поскольку мы устанавливаем его стиль display в 'none'.
4. Добавление элемента в DOM: мы добавляем созданный элемент в тело документа, чтобы он мог инициировать загрузку.
5. Клик по элементу: вызываем метод click() на элементе, чтобы эмулировать клик и начать загрузку файла.
6. Удаление элемента: после выполнения загрузки мы удаляем элемент из DOM для поддержания чистоты страницы.

Примечание

Этот метод не требует подключения к серверу и позволяет создавать и загружать текстовые файлы непосредственно с помощью браузера.

Решение, которое работает в IE10:

Если вам нужен CSV-файл, вы можете изменить его тип и имя на txt. Вот пример кода:

var csvContent = data; // здесь мы загружаем наши данные CSV
var blob = new Blob([csvContent], {
    type: "text/csv;charset=utf-8;"
});

navigator.msSaveBlob(blob, "filename.csv");

Этот код создает Blob с содержимым ваших данных и сохраняет его как CSV-файл с помощью функции navigator.msSaveBlob, что совместимо с Internet Explorer 10. Не забудьте, что для успешного создания CSV-файла важно, чтобы содержимое данных было правильно отформатировано.

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

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

Этот код устанавливает атрибут href для ссылки с классом download, создавая ссылку для скачивания CSV-файла. Убедитесь, что переменная data содержит вашу строку, которую вы хотите сделать доступной для загрузки.