4

I was wondering if it is possible to make browser behaving the same way as it does when sees "Content-disposition: attachment; filename=..." by using client-side javascript only? This implies the data for the file to be saved is available on the client side only.

I.e. suppose we have a javascript Array, on client side only, 

var data = [
              ["aa","bb","cc","dd","ee","ff","gg","hh","ii"]
              [ 1,   2,   3,   4,   5,   6,   7,   8,   9],
              ..
           ];

and I want to save this array as a text file to the users's computer. The user must be prompted for the file name(i.e. I'm NOT trying to bypass browser's security settings or anything like that).

Is this doable without storing array to the server's temp file and making another request to get this temp file back to the user? If there is no simple answer to this question - any ideas, google keywords or links are much appreciated.

Pointy
  • 405,095
  • 59
  • 585
  • 614
Vera
  • 51
  • 1
  • 6
  • can i propose saving this array in a cookie ??? if its welcome i can bring you the code :) – Marwan Apr 07 '11 at 21:06
  • No, this needs to be a real file in the user's file system, so the user can open it later and possibly edit it's content, etc. – Vera Apr 07 '11 at 22:08
  • Cookie simply wouldn't do - they are available from the browser only. I cannot tell the user to go Tools->Options->Privacy->Manage Cookies to get his data. – Vera Apr 07 '11 at 22:09

4 Answers4

1

Take a look at dowloadify: it uses the technique suggested by @Adam

Guillaume86
  • 14,341
  • 4
  • 53
  • 53
1
var YourTextData = "text data here";
window.location.href = "data:application/octet-stream," + encodeURIComponent(YourTextData);
CodeDreamer68
  • 420
  • 5
  • 10
  • Slick, but It seems there's no IE or Safari compatible method to set a file name, which might be a showstopper for many. See http://stackoverflow.com/questions/283956/is-there-any-way-to-specify-a-suggested-filename-when-using-data-uri and http://caniuse.com/#feat=download – tuomassalo Feb 06 '15 at 20:52
1

You can't do it with a pure JavaScript solution - you need to have the file push come from the server.

But you don't have to have a "physical" file on the server to accomplish that. You can store your data string in memory and write to the response stream from memory. But you won't get any more detailed answer on how to do that without telling us what server-side technology you're working with.

Kon
  • 27,113
  • 11
  • 60
  • 86
  • Thank you for your reply. I'm using .Net 4/C#, but I do not use UpdatePanel or other ajaxified controls for .Net. Another 3-rd party JS framework is being used(if this matters) The problem is that currently I have some Javascript that adds "final touches" to the data before it displays it. The "save as"(flat file) need to save exactly what user sees in parseable format, thus, "Print" with printing to *.esp would not do it for me. – Vera Apr 07 '11 at 21:54
  • Technically, nothing stops me from implementing on the server the similar code/algorithms that already exists in Javascript. The only issue with it - it is two implementations of the same functionality, and it is always a pain. – Vera Apr 07 '11 at 21:59
  • You should do all your data manipulation on the server-side, and only present it on the client-side. Unless you're are sorting and paging via front-end, then you basically have to do the same thing in the code-behind. It would be easy then to do Response.BinaryWrite() the contents of the MemoryStream. Check this out for example: http://www.c-sharpcorner.com/UploadFile/jhblankenship/DownloadingFromMemStream11262005060834AM/DownloadingFromMemStream.aspx – Kon Apr 08 '11 at 00:18
  • well, it was not my call - on where to do the final data manipulations, unfortunately. Besides, like I said, the it is not actual data manipulation, but rather final touches to the data - values formatting and so forth. The client-side implementation cannot be taken out(requirement). If you are positive there is no work around to force the browser to open the "Save as" dialog for client-side data (or for data received via AJAX call), then yeah, I'll have to have two implementations of the same logic. Luckily it is already implemented on the server, just needs to be plugged in. – Vera Apr 08 '11 at 00:40
  • Well, in theory you could do it by faking it with a hidden iframe, perhaps this would help - http://richard.gluga.com/2009/05/2-stage-ajax-file-download-with-yui.html But I think it would be a lot simpler (thus faster to develop and easier to maintain) if you just do it server-side. – Kon Apr 08 '11 at 01:05
1

AFAIK, you cannot do this well using Javascript in any sort of cross-browser manner.

If you really don't want to use a server, you could make a hybrid solution using Flash. Essentially you would make a custom Flash control that you would communicate with via Javascript (ExternalInterface) and then the Flash control would initiate the "file save" operation.

Here's an article on the topic: Save a file locally with Flash Player 10

Adam
  • 576
  • 3
  • 6