Как сохранить переменную Javascript как файл на клиентском ПК

Я отправлю свой код в редактировании … У меня возникли проблемы с отправкой моего вопроса с включенным кодом.

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

Весь диалог чата хранится в переменной javascript, называемой chatHistoryHTML, и цикл заставляет сеанс чата на странице обновляться каждые 5 секунд, добавляя новые строки текста в переменную chatHistoryHTML и отображая ее в разделе «history» для клиента. видеть.

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

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

Я открыт для предложений. Я знаю немного Javascript и PHP, но ничего не знаю о AJAX

Основные возможности:

  • Сбросьте журнал чата в новое окно и вызовите print() (изолируйте журнал и сделайте его пригодным для печати, иначе пользователь будет захватывать все элементы пользовательского интерфейса на странице) или
  • Используйте AJAX и отправьте его на сервер, который затем перенаправляет его на электронную почту обратно пользователю.

JavaScript не имеет возможности сохранять файлы локально для клиента. Однако у вас есть дополнительный вариант:

  • Перенесите его в Silverlight / Flash, чтобы иметь дополнительные функции / функции.

На клиентской стороне вы можете попробовать:

 var content, MIME_TYPE, theBlob, a; // What will actually be put into the file content = "THE FILE CONTENT"; // The file type MIME_TYPE = "text/plain"; // Basically, the file itself theBlob = new Blob([content], {type: MIME_TYPE}); // The anchor element a = document.createElement("a"); // Set the name of the file that will be downloaded a.download = "Chat_History.txt"; // Set the contents to be downloaded a.href = window.URL.createObjectURL(theBlob); // Anchor's text a.textContent = "Download"; // What's displayed as the URL of the anchor (when hovered, copied, etc.) a.dataset.downloadurl = [MIME_TYPE, a.download, a.href].join(":"); // Add the anchor to the page document.body.appendChild(a); 

ДЕМО: http://jsfiddle.net/oqskpydg/

Это использует функции, недоступные во всех браузерах, но это надежный вариант.


Рекомендации:

Вы можете использовать схему URI данных , которая более широко поддерживается, чем решение Ian, и она не зависит от серверной части:

 <a href="data:application/octet-stream;base64,PHVsPjxsaT50aGlzPGxpPmlzPGxpPmE8bGk+Y2hhdCBsb2c8L3VsPgo=">Download chat log</a> 

Вы можете использовать window.btoa и window.atob для обработки base64.

Демо . Показывать источник кадра, чтобы увидеть источник вместо обертки PasteHTML.