Cross browser javascript download function

Question

I'm building some content from my json response on the client side to display in a html table. I also have a download button, which up on clicking should be saving the file to local disk. I'm creating the csvContent from the same json response on the fly.

code :

<a class="download-page" href="#" onClick="downloadPage();">Download</a>

function downloadPage() {
    window.location.href = 'data:text/csv;charset=UTF-8,'+ encodeURIComponent(csv);
    //window.location.href = "data:text/csv;charset=utf-8," + escape(csv));
    //window.open("data:text/csv;charset=utf-8," + encodeURI(csv))
}

This works only in chrome 10. Some versions of browser doesn't support this at all. IE is a big problem. But most of my users use IE 9 and Fire fox. Is there any cross browser functionality to attain this.

Sample CSV data:

"Testcase Reports for : jumashan\r\n
 Total Unique Stimuli : 1\r\n
 Total execution time : 0 Days 0 hours 16 minutes\r\n

 Testcase Name, Count (Pass/Fail/Error/Block), Version Number, Execution Time(HH:MM:SS),
 INIT-CHECK,2( 0 / 0 / 0 / 2 ) ,0,0:16:28,

 Testcase Reports for : prabhaa\r\n
 Total Unique Stimuli : 1\r\n
 Total execution time : 0 Days 1 hours 23 minutes\r\n"

Something like this? http://stackoverflow.com/questions/3665115/create-a-file-in-memory-for-user-to-download-not-through-server — NinjaFart, Dec 06 '13 at 20:45
IE only supports a subset of the data protocol, for security reasons. You can read more about it [here](http://msdn.microsoft.com/en-us/library/cc848897%28VS.85%29.aspx) and [here](http://en.wikipedia.org/wiki/Data_URI_scheme) — Henrik, Dec 06 '13 at 21:31
@NinjaFart Plz check the sample csv I edited above. All I'm doing is formatting the json object and adding ',' as per the requirement. — Satish Jonnala, Dec 06 '13 at 21:52
@SatishJonnala Sorry, I think you are out of luck. As Henrik mentioned IE lacks support. I've tested in IE and Chrome. And only got it working in Chrome. Even if you added server-side headers to force download, IE would still cause trouble. — NinjaFart, Dec 06 '13 at 22:31
@NinjaFart Thanks for the update. I guess I'm ended up in recreating the CSV content on Server and send to the client using CSV headers. — Satish Jonnala, Dec 06 '13 at 22:52
Solution would be a PHP proxy that would send the correct header and url of the attached document.. — MightyPork, Dec 06 '13 at 22:54
@MightyPork I'm using J2EE on the server side. I think I'm going to use a Servlet to server this purpose. Thanks for the suggestion though. — Satish Jonnala, Dec 06 '13 at 23:01

score -1 · Answer 1 · answered Feb 03 '14 at 14:01

You can easily obtain the content by building it in a function yourself.

For downloading it, only Chrome allows you to specify a file name.

Other web browsers such as Firefox do not offer this feature yet and if you want your download anchor to push a download you can call the following function (used in a prior project):

window.open( "data:application/octet-stream;charset=utf-8,"+escape(data));

(Note the octet-stream MIME type)

The "data" variable contains the CSV data you want to output.

Hope this helps.

Cross browser javascript download function

1 Answers1