Как создавать и запрашивать сохранение файла из содержимого в браузере клиента?

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

(define-handler (download-deck) ((deck :json))
  (setf (header-out :content-type) "application/json"
    (header-out :content-disposition) "attachment")
  deck)

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

Это кажется глупым.

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

Каждый ответ, который я читал по этому вопросу, либо говорит "нет, вы не можете сохранять файлы с помощью javascript", либо "да, там есть эта полудокументированная часть API Chrome, которая может позволить вам сделать это на трех страницах".

Ответ 1

Эта библиотека "FileSaver" может помочь. Если вы хотите, чтобы он был достаточно кросс-браузером, вам также понадобится this, чтобы реализовать API-интерфейс W3C Blob в тех местах, где он еще не реализован. Оба уважают пространства имен и полностью агностикны, поэтому не беспокойтесь о проблемах с именами.

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

var blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"});
saveAs(blob, "hello world.txt");

Обратите внимание, что первый аргумент new Blob должен быть списком строк и что вы должны указать имя файла. Как и в случае, пользователь увидит, что этот файл загружается локально, но сам не сможет его назвать. Надеюсь, они используют браузер, который обрабатывает локальные конфликты имен файлов...

Ответ 2

Это мой код:

<a id='tfa_src_data'>Export</a>

document.getElementById('tfa_src_data').onclick = function() {                  
                        var csv = JSON.stringify(localStorage['savedCoords']);
                        var csvData = 'data:application/csv;charset=utf-8,' 
                                       + encodeURIComponent(csv);
                        this.href = csvData;
                        this.target = '_blank';
                        this.download = 'filename.txt';
                    };

Вы можете использовать различные типы данных.

Ответ 3

В зависимости от того, что вы пытаетесь сделать точно, концепция локального хранилища HTML5 может вам помочь.

Итак, что такое хранилище HTML5? Проще говоря, это способ веб-страниц для хранения названных пар ключ/значение локально, в клиентском веб-браузере. Подобно файлам cookie, эти данные сохраняются даже после перехода от веб-сайта, закрытия вкладки браузера, выхода из браузера или того, что у вас есть. В отличие от куки файлов эти данные никогда не передаются на удаленный веб-сервер (если только вы не сойдете с пути, чтобы отправить его вручную). http://diveintohtml5.info/storage.html

Там также API файловой системы (пока только реализованный в Chrome AFAIK) http://www.html5rocks.com/en/tutorials/file/filesystem/