Как сохранить файл в javascript

Скачивание и сохранение файлов на диск

Как сделать сохранение файла из HTML-страницы в браузере на диск? Два способа вызова из браузера диалогового окна для скачивания и сохранения файла на диск пользователя с помощью Javascript.

Современный способ

Использование API доступа к файловой системе и метода showSaveFilePicker() .

Чтобы сохранить файл, следует вызвать метод showSaveFilePicker() , который возвращает обещание (promise) с FileSystemFileHandle . Этому методу можно передать желаемое имя файла, например: .

У этого API есть ограничения: работает только когда HTML-документ отдаётся по протоколу HTTPS и открыт не в iframe.

Классический способ

Элемент-ссылка на странице даёт возможность пользователю кликнуть по ней, скачать и сохранить файл на свой диск. Остаётся незаметно, с помощью JavaScript, добавить такой HTML-элемент на страницу и программно кликнуть по нему для вызова диалогового окна выбора места сохранения.

Прогрессивное улучшение

В приведенном ниже методе используется API доступа к файловой системе, если он поддерживается, а в остальных случаях используется классический подход с .

const saveFile = async (blob, suggestedName) => < // Обнаружение поддержки браузером API. // API должен поддерживаться // и приложение не запущено в iframe. const supportsFileSystemAccess = 'showSaveFilePicker' in window && (() => < try < return window.self === window.top; >catch < return false; >>)(); // Если File System Access API поддерживается… if (supportsFileSystemAccess) < try < // Показать диалог сохранения файла. const handle = await showSaveFilePicker(< suggestedName, >); // Записать blob в файл. const writable = await handle.createWritable(); await writable.write(blob); await writable.close(); return; > catch (err) < // Обработчик исключения, когда // пользователь отменил скачивание файла if (err.name !== 'AbortError') < console.error(err.name, err.message); return; >> > // Когда API доступа к файловой системе не поддерживается… // Сделать blob URL. const blobURL = URL.createObjectURL(blob); // Сделать невидимый HTML-элемент `` // и включить его в документ const a = document.createElement('a'); a.href = blobURL; a.download = suggestedName; a.style.display = 'none'; document.body.append(a); // Программно кликнуть по ссылке. a.click(); // Уничтожить большой blob URL // и удалить ссылку из документа // после клика по ней setTimeout(() => < URL.revokeObjectURL(blobURL); a.remove(); >, 1000); >;

В обоих случаях функция сохраняет файл. Если поддерживается API доступа к файловой системе, пользователь всегда получит диалоговое окно сохранения файла, в котором он может выбрать место сохранения файла.

Когда метод пойдёт по классическому сценарию, наличие диалогового окна для выбора места сохранения файла будет зависеть от настроек браузера. Если их не менять, файлы сохраняются в папку по умолчанию (“Загрузки”/”Downloads” в профиле пользователя).

Курсы javascript

В javascript мне нужно сохранить данные в текстовый файл.
Например в php это делается с помощью file_put_contents, который принимает три параметра. Если например записать вот так.
file_put_contents(‘file.txt’, ‘text’, FILE_APPEND);

1. Файл который создается
2. Параметр который нужно записать в файл
3. FILE_APPEND — дописывает данные в конец файла если он сушествует. Без этого флага, файл будет перезаписываться, стирая последние изменения.

Как сохранить данные в файл и чтобы можно было добавлять новые данные? Существует аналог из php file_put_contents?

23.10.2021, 12:20
Регистрация: 02.01.2010
Сообщений: 6,495

Katy93, в каком javascript?
Серверном на Node.js?
Клиентском в браузере рандомного посетителя вашего сайта?

Если второе — то, очевидно, никак. Вы не имеете право трогать жёсткий диск клиента. Вы только можете предложить клиенту сохранить файл, а он может и отказаться.
Для этого используется Blob, URL.createObjectURL и » download=»»>.

Если первое — то для работы с файловой ситсемой есть встроенная библиотека fs. Запись файла, соответственно, fs.writeFile.

__________________
Последний раз редактировалось Aetae, 23.10.2021 в 12:27 .
23.10.2021, 12:26
Регистрация: 03.02.2020
Сообщений: 2,707

Javascript в браузере не имеет доступа к файловой системе.
Единственный способ что то сохранить — это выполнить «загрузку» через элемент При этом появится стандартное диалоговое окно выбора файла, куда записать. Дописывать естественно нельзя.

В Node.js конечно есть возможности записи в файл.

Как создать и сохранить файл в js на клиенте [дубликат]

Файл должен сохраняться в «Загрузки» по-умолчанию Как это можно реализовать?

Отслеживать

задан 31 дек 2018 в 9:04

Max Moskalenko Max Moskalenko

118 1 1 серебряный знак 5 5 бронзовых знаков

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

Все оказалось возможным:

function saveFile() < var data = document.getElementById('input').value; var a = document.getElementById("linkForSavingFiles"); var file = new Blob([data], < type: 'plain/text' >); a.href = URL.createObjectURL(file); a.download = 'file.txt'; a.click(); >

Отслеживать

14.6k 6 6 золотых знаков 36 36 серебряных знаков 71 71 бронзовый знак

ответ дан 31 дек 2018 в 11:10

Max Moskalenko Max Moskalenko

118 1 1 серебряный знак 5 5 бронзовых знаков

javascript
файловая-система

Важное на Мете

Связанные

Как создать и сохранить файл на JavaScript

Это туториал по созданию и сохранению файлов на JS, который состоит из 3 шагов.

Создадим функцию, которая выполняется при клике на кнопку.

function saveStaticDataToFile() >

2. Создадим объект Blob, первый параметр это содержимое нашего файла, второй тип файла.

var blob = new Blob(["My first txt file."], 
< type: "text/plain;charset=utf-8" >);

3. Сохраним файл при помощи функции saveAs, первый параметр blob объект, созданный на предыдущем шаге, второй название файла. Не забудьте скачать и подключить бибилиотеку https://github.com/eligrey/FileSaver.js

saveAs(blob, "static.txt");



 
 
 
Как создать и сохранить текстовый файл.