Как сохранить строку (данные) в файл на клиенте (браузере)? JavaScript

В видео рассмотрен вопрос сохранения динамически создаваемого файла на клиентской стороне (на стороне браузера) при помощи многочисленных интерфейсов прикладного программирования, которые "живут" в браузерной среде выполнения кода.
Короче, если хочешь сохранять файлы из браузера на комп, тогда один раз посмотри это видео.
Публикация на тему:
efim360.ru/javascript-kak-soh...
Код из видео:
let stroka = 'Обычный текст!'
let blob = new Blob([stroka], {type: 'text/plain'})
let link = document.createElement('a')
link.setAttribute('href', URL.createObjectURL(blob))
link.setAttribute('download', 'мой файл')
link.click()
Можно обернуть в функцию и вызывать при необходимости:
function saveToPC(str = ""){
let blob = new Blob([str], {type: "text/plain"});
let link = document.createElement("a");
link.setAttribute("href", URL.createObjectURL(blob));
link.setAttribute("download", `${Date.now()}`);
link.click();
}
Благодарю за просмотр!
Вы можете поддержать канал монеткой - Номер карты - 4276 5500 2378 3189
Ваша материальная поддержка придаст мне больше мотивации на создание нового материала.
Ссылки на стандарты:
The Blob Interface and Binary Data - www.w3.org/TR/FileAPI/#blob-s...
www.iana.org/assignments/medi...
Interface Document - dom.spec.whatwg.org/#interfac...
url.spec.whatwg.org/
html.spec.whatwg.org/multipag...
UI Events - www.w3.org/TR/uievents/#event...

[@user-bs5te4fp1w]

Огромное спасибо!!! Великолепное объяснение. Побольше бы подобного...

[@user-go4tz2dj8n]

Евгений, спасибо что посмотрели и дали обратную связь! Хорошего дня.

[@honovatimoha2767]

@@user-go4tz2dj8n а можна чтоби он так делал в конкретную папку мне нужно чтоби он не скачивал а изминял или удалял и делал копию на томже месте?

[@hibrands]

Готовая функция, если кому надо: const downLoadFile = (text: string): void => { const url = window.URL.createObjectURL(new Blob([text])); const link = document.createElement("a"); link.href = url; link.setAttribute("download", "text"); document.body.appendChild(link); link.click(); document.body.removeChild(link); window.URL.revokeObjectURL(url); };

[@danuxa100]

Большое спасибо за ваш труд!

[@user-go4tz2dj8n]

Благодарю!

[@doktorlich2428]

Качественный контент!

[@user-go4tz2dj8n]

Спасибо! Старался осветить вопрос полностью т. к. тема не очевидна и требует разбора.

[@dishaforex]

Прелестно! Путь сохранения как задать? ----------------------------------------------------------------------------------------------- PS UPD: «Все, разобрался!» | Это, оказывается, просто путь сохранения по умолчанию в хроме! Зато теперь, благодаря вашему видео ©Доминик Торетто | написанный мной генератор номеров может не только копировать результат в буфер обмена, но и сохранять напрямую в файл! Огромная | благодарность!

[@sunkissesmoon]

Отличная работа! Спасибо!

[@user-go4tz2dj8n]

Спасибо за просмотр! Хорошего дня!

[@user-rt3lt4tu2p]

Спасибо за подробнейший разбор. Остался вопрос: как задать путь сохранения файла, для того, чтобы он сохранялся в папке проекта?

[@user-rt3lt4tu2p]

И какой тип использовать для сохранения в json?

[@user-go4tz2dj8n]

async function f(){ let blob = new Blob([`Данные которые нужно сохранить`], {type: 'text/plain'}); let fname = `мой-файл`; let a = await window.showSaveFilePicker({ suggestedName: `${fname}.txt`, types: [ { description: 'Простой текстовый файл', accept: { 'text/plain': ['.txt'], }, }, ], }); let b = await a.createWritable(); let c = await b.write(blob); let d = await b.close(); }; f(); Благодарю за просмотр! Вот пример решения с выбором пути в диалоговом окне пользователя. Жёсткий путь скорее всего тоже можно задать. Нужно смотреть конкретную реализацию объектов Обещаний, как они работают в методах этого API. Так глубоко не изучал, к сожалению. Ссылка на документацию wicg.github.io/file-system-access/ по этому API - "File System Access". В ХРОМЕ работает без проблем. Для json просто укажите расширение '.json'. Думаю этого будет достаточно так как внутри обычный текст.

[@user-rt3lt4tu2p]

@@user-go4tz2dj8n Огромное спасибо за объяснение=)

[@nn4254]

Хороший контент. Подписчиков и просмотров незаслуженно мало

[@user-go4tz2dj8n]

Благодарю! Ютуб даёт приоритет развлекательному контенту, поэтому цифры такие. Знания нынче не в тренде.

[@paveldpv91]

Магия!

[@user-go4tz2dj8n]

Добрый день Павел! Первый раз точно магия.

[@andrewproletarian5153]

Ребят, а как сделать чтоб появилось окно выбора папки, куда сохранить файл?

[@shamanvalius2902]

Ооо... То нужно для сайта без сервера. Сначала сохраняешь настройки пользователя сайта, потом читаешь. И без сервера. И вот возник вопрос.. А если всё это хранить в облаке (гугл диск, например)... Сам сайт + его данные + настройки. Будет ли работать?

[@shamanvalius2902]

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

[@andrey7829]

Будет ли работать без интернета?

[@user-go4tz2dj8n]

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

[@markdiper2933]

Как тебя можно отблагодарить??? Крипта?

[@seriypenal]

не видел более нудного видео чем это

[@user-go4tz2dj8n]

Кирилл, всё когда-то в первый раз. Спасибо, что уделили время на просмотр и на комментарий. Возможно, вы просто искали готовое решение и вам не хотелось вникать в алгоритм его работы. Тогда я вас понимаю. Для меня этот вопрос был более важен, поэтому записал видео со всеми нюансами, которые посчитал важными. Снимите свой вариант, лучший, не нудный. Хорошего дня!