CODEWITHSUNDEEP
javascript
Travis
Travis

Reputation: 7497

Save File From Local Data in Javascript

Heres the scenario:

  1. User comes to my website and opens a webpage with some javascript functionality.
  2. User edits the data through javascript
  3. User clicks on a save button to save the data, thing is, it seems like they shouldn't need to download this data because its already in javascript on the local machine.

Is it possible to save data from javascript (executing from a foreign webpage) without downloading a file from the server?

Any help would be much appreciated!

Upvotes: 6

Views: 8370

Answers (5)

lukejacksonn
lukejacksonn

Reputation: 485

I came across this scenario when I wanted to initiate a download without using a server. I wrote this jQuery plugin that wraps up the content of a textarea/div in a Blob, then initiates a download of the Blob. Allows you to specify both file name and type..

jQuery.fn.downld = function (ops) {
  this.each(function () {
    var _ops = ops || {}, 
    file_name = _ops.name || "downld_file",
    file_type = _ops.type || "txt",
    file_content = $(this).val() || $(this).html();

    var _file = new Blob([file_content],{type:'application/octet-stream'});
    window.URL = window.URL || window.webkitURL;

    var a = document.createElement('a');
    a.href = window.URL.createObjectURL(_file); 
    a.download = file_name+"."+file_type;
    document.body.appendChild(a);
    a.click(); $('a').last().remove();
  });
}

Default Use : $("#element").downld();
Options : $("#element").downld({ name:"some_file_name", type:"html" });

Codepen example http://codepen.io/anon/pen/cAqzE

Upvotes: 5

shaILU
shaILU

Reputation: 2116

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: a. Open a new window with url blank.jsp b. using document.write I create a form in it with one field name text in it and set data to export inside it. c. Now POST that form to export.jsp of same heirarchy. d. Contents of export.jsp I am pasting below are self explanatory.

// code start

<%@ 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>

// code end

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

Thanks Shailendra

Upvotes: 1

Christian C. Salvad&#243;
Christian C. Salvad&#243;

Reputation: 828090

For saving data on the client-side, without any server interaction, the best I've seen is Downloadify, is a small JavaScript + Flash library allows you to generate and save files on the fly, directly in the browser...

Check this demo.

Upvotes: 5

Luke Schafer
Luke Schafer

Reputation: 9265

JavaScript is run in a sandboxed environment, meaning it only has access to specific browser resources. Specifically, it doesn't have access to the filesystem, or dynamic resources from other domains (web pages, javascript etc). Well, there are other things (I/O, devices), but you get the point.

You will need to post the data to the server which can invoke a file download, or use another technology such as flash, java applets, or silverlight. (i'm not sure about the support for this in the last 2, and I also wouldn't recommend using them, depends what it's for...)

Upvotes: 3

user181548
user181548

Reputation:

You can save a small amount of data in cookies.

Upvotes: 0

Related Questions