发表新帖
发表新帖

Client side file creation and download

前端 未结
关注
5 968
南方客
南方客 2021-01-05 15:04

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

相关标签:
5条回答
  • 借酒劲吻你
    2021-01-05 15:10

    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>
    0 讨论(0)
  • 深忆病人
    2021-01-05 15:19

    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.

    0 讨论(0)
  • 孤城傲影
    2021-01-05 15:26

    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.

    0 讨论(0)
  • 借酒劲吻你
    2021-01-05 15:26

    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);
}
    0 讨论(0)
  • 面向向阳花
    2021-01-05 15:27

    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.

    0 讨论(0)
 看不清?
提交回复
热议问题