CODEWITHSUNDEEP
javascripthtml
arinte
arinte

Reputation: 3728

Client side file creation and download

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?

Upvotes: 6

Views: 13694

Answers (5)

B T
B T

Reputation: 60855

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

Upvotes: 3

Matt Sanders
Matt Sanders

Reputation: 10685

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.

Upvotes: 3

shaILU
shaILU

Reputation: 2116

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:

  1. I am in the project build on SmartClient. We need to download/export data of a grid (table like structure).
  2. 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.
  3. What I did is made two JSPs namely: blank.jsp and export.jsp.
  4. blank.jsp is literally blank, now I need to export the grid data that I already have on client side.
  5. 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.

Upvotes: 0

Pranay Rana
Pranay Rana

Reputation: 176886

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>

Upvotes: 4

Davide Piras
Davide Piras

Reputation: 44595

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.

Upvotes: -2

Related Questions