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 puter.

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 mands 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 e 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

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 puter.

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 mands 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 e 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

• php
• javascript
• ajax
• file-io

• so you know how to save the file? you just want a confirm box to appear? – imulsion Commented Apr 24, 2013 at 16:50
• I know how to tell the user to manually save the file... I can't figure out how to use PHP or Javascript to save the file (I doubt Javascript can do it, but I'm sure PHP can). – Kenny Johnson Commented Apr 24, 2013 at 16:53
• While I don't know AJAX, I am willing to use it if someone can provide code for me. (If this requires AJAX) – Kenny Johnson Commented Apr 24, 2013 at 17:05
• php can definitely do it...but im sorry, i dont know how :/ – imulsion Commented Apr 25, 2013 at 9:43

3 Answers 3

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/oqskpydg/

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

References:

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

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.

Primary options:

• Dump the chat log to a new window and call print() (isolate the log and make it printable otherwise the user is grabbing all UI elements on the page as well), or
• Use AJAX and send it off to the server which then relays it to an email back to the user.

JavaScript doesn't have the ability to save files locally to the client. However, you have a secondary option:

• Migrate it to Silverlight/Flash to have the additional functionality/features.