Client side file creation and download

Question

We are using fusioncharts and it has the ability using javascript on the client side to export csv data, we want to be able to take that data and create a file on the fly in the browser. is that possible? How?

It seems nobody here has provided an automatic *client side* cross-browser solution so here it is: http://stackoverflow.com/a/3665147/279255 — Marc, Jan 10 '13 at 20:44
@arinte I have answered this before, here it is http://stackoverflow.com/questions/18589865/how-to-download-csv-with-fusion-charts-in-codeigniter/18606193#18606193 — Bhargav Nanekalva, Sep 23 '15 at 05:34
Possible duplicate of [Create a file in memory for user to download, not through server](http://stackoverflow.com/questions/3665115/create-a-file-in-memory-for-user-to-download-not-through-server) — Marc L., Apr 28 '17 at 19:18

score 4 · Answer 1 · answered Feb 24 '11 at 17:10

4

Try below code allow you to access client side file system but this works only in IE browser

<html>
    <body>
    <script language="JScript">
    <!--
    function getsize()
    {
        var myObject, afile, size;
        myObject = new ActiveXObject("Scripting.FileSystemObject");
        afile = myObject.GetFile("c:\\test.txt")
        size = afile.Size;
        alert("The size of the test.txt file is:" + size);
    }
    -->
    </script>
    Get the size for the file "test.txt"
    <form name="myForm">
    <input type="Button" value="Get Size" onClick='getsize()'>
    </form>
    </body>
    </html>

answered Feb 24 '11 at 17:10

Pranay Rana

175,020
35
237
263

3

nice solution for the sake of the example, but I think we should not ever implement anything in a browser specific way, we are in 2011 not in 1998 and people uses Chrome, Opera, Safari, IE, Firefox, mobile browsers... – Davide Piras Feb 24 '11 at 17:18
2

@Davide - I just show the way to increase his knowledge that we can do it in ie browser , and my answer some how meet with his half requirement .. my answer is not out of scope of this question ... what you wrote i already know ... and already wrote in my answer that this this is work form ie only – Pranay Rana Feb 25 '11 at 04:35
1

I see your point but wanted to note we should not target any specific browser or operating system, code above would probably fail on ipad or any other non windows platform. – Davide Piras Feb 25 '11 at 07:02

score 3 · Answer 2 · answered Jul 25 '14 at 21:00

3

Take a look at filesaver.js. As long as you are okay with IE10+ this is a pretty solid solution that elegantly handles using the best method depending on the browser.

answered Jul 25 '14 at 21:00

Matt Sanders

8,023
3
37
49

score 1 · Answer 3 · edited May 23 '17 at 10:31

Since Marc's answer was (stupidly) converted to a comment, and none of the other answers actually answer the question, here's the answer:

<a id="a">Click me to DL something</a>
<script>

setupDownloadLink(document.getElementById("a"), "moose.txt", "ok")

function setupDownloadLink(element, filename, text) {
    element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text))
    element.setAttribute('download', filename)
}
</script>

This was derived from the answer Marc referenced, which is useful in situations where you're not specifically clicking on a link tag: https://stackoverflow.com/a/3665147/279255

// must be called in a click handler or some other user action
function download(filename, text) {
  var element = document.createElement('a');
  element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
  element.setAttribute('download', filename);

  element.style.display = 'none';
  document.body.appendChild(element);

  element.click();

  document.body.removeChild(element);
}

This puts the entire resource in the DOM, and is not a good method. Far better to use a Blob URI. — Brad, Jul 13 '20 at 18:40

score 1 · Answer 4 · edited Feb 06 '13 at 13:17

I would suggest you not to create a file locally on client side, instead prompt user (Save As dialog box) to download data generated client side on the location he desires.

The solution to download local/client-side contents via javascript is not straight forward. I have implemented one solution using smartclient-html-jsp.

Here is the solution:

I am in the project build on SmartClient. We need to download/export data of a grid (table like structure).
We were using RESTish web services to serve the data from Server side. So I could not hit the url two times; one for grid and second time for export/transform the data to download.
What I did is made two JSPs namely: blank.jsp and export.jsp.
blank.jsp is literally blank, now I need to export the grid data that I already have on client side.
Now when ever user asks to export the grid data, I do below:
1. Open a new window with url blank.jsp
2. using document.write I create a form in it with one field name text in it and set data to export inside it.
3. Now POST that form to export.jsp of same heirarchy.
4. Contents of export.jsp I am pasting below are self explanatory.

<%@ page import="java.util.*,java.io.*,java.util.Enumeration"%>
<%
    response.setContentType ("text/csv");
    //set the header and also the Name by which user will be prompted to save
    response.setHeader ("Content-Disposition", "attachment;filename=\"data.csv\"");
    String contents = request.getParameter ("text");
    if (!(contents!= null && contents!=""))
        contents = "No data";
    else
        contents = contents.replaceAll ("NEW_LINE", "\n");

    //Open an input stream to the file and post the file contents thru the
    //servlet output stream to the client m/c

    InputStream in = new ByteArrayInputStream(contents.getBytes ());
    ServletOutputStream outs = response.getOutputStream();

    int bit = 256;
    int i = 0;
    try {
        while ((bit) >= 0) {
            bit = in.read();
            outs.write(bit);
        }
        //System.out.println("" +bit);
    } catch (IOException ioe) {
        ioe.printStackTrace(System.out);
    }
    outs.flush();
    outs.close();
    in.close();
%>
<HTML>
<HEAD>

</HEAD>

<BODY>

<script type="text/javascript">
    try {window.close ();} catch (e) {alert (e);}
</script>
</BODY>
</HTML>

This code is tested and deployed/working in production environment, also this is cross-browser functionality.

This is entirely serverside and so has nothing to do with the question — B T, Jul 18 '16 at 21:40

score -2 · Accepted Answer · answered Feb 24 '11 at 17:10

-2

you have no way to touch the local disk with Javascript by design.

I think you could pass the whole bunch of data from javascript to the server side code ( php, asp.net, java... ) then you could stream it down to the browser somehow.

answered Feb 24 '11 at 17:10

Davide Piras

43,984
10
98
147

2

The filesystem API spec ^^ has been killed off as of 4/2014. – Matt Sanders Jul 25 '14 at 20:55

Client side file creation and download

5 Answers5

Linked