How to save Javascript variable as file on the client PC

Question

I will post my code in an edit... I'm having trouble submitting my question with the code included.

I maintain a chat program which was already built when I was assigned to it. My job started out just themeing it to make it match the rest of our website. Now management is asking for additional features that are over my head. One such feature is an option the customer to save a copy of the chat log to their computer.

The entire chat conversation is stored in a javascript variable called chatHistoryHTML and a loop causes the chat session on the page to update every 5 seconds by adding new lines of text to the chatHistoryHTML variable and displaying it in the 'history' div for the customer to see.

Right now, I understand how to open a new window to display only the chat history and none of the logos, backgrounds, or the text input box. However, I'm unable to pass PHP commands to that new page using my method.

Ideally I would like a solution that would allow the user to click a button and have a save dialog come up that only saves the chat conversation, without opening a new window. I'm opening a new window right now because I'm trying to avoid saving all the other content on the page.

I'm open to suggestions. I know a little Javascript and PHP but know nothing about AJAX

Answer 1

All on the client side, you could try:

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

DEMO: http://jsfiddle.net/oqskpydg/

This does use features that aren't available in all browsers, but it's a solid option.

---

References:

• Blob constructor - https://developer.mozilla.org/en-US/docs/DOM/Blob
• Blob browser compatibility - http://caniuse.com/blobbuilder
• download attribute/property - https://developer.mozilla.org/en-US/docs/HTML/Element/a#attr-download
• download attribute/property browser compatibility - http://caniuse.com/download
• URL.createObjectURL - https://developer.mozilla.org/en-US/docs/DOM/window.URL.createObjectURL
• dataset property - https://developer.mozilla.org/en-US/docs/DOM/element.dataset
• dataset property browser compatibility - http://caniuse.com/dataset

Answer 2

You can use the Data URI scheme, which is more widely supported than Ian's solution, and it's not dependent on the server side:

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

You can use window.btoa and window.atob for base64 handling.

Demo. Show frame source to see source instead of PasteHTML's wrapping.