CODEWITHSUNDEEP
javascriptweb-applicationsvaadinoracleforms
Aleksander Burzec
Aleksander Burzec

Reputation: 370

How to implement 'save as' button in web application

I have to implement in my vaadin-oracle forms app 'save as' button and i don't know how i can do that. I cant use Applet for that. Data will be saved and stored on hard drive (in various file format).

I read that javascript is insecure for that. Second idea was create simple web-service, which could be hosted on localhost and send there data from web app to save.

Is there any tutorials or ideas how to solve it?

Upvotes: 2

Views: 1216

Answers (1)

Felix Haeberle
Felix Haeberle

Reputation: 1606

See this CODEPEN by Davide Rizzo here, its javascript but pretty handy!

This code uses FileSaver.js

$("#btn-save").click( function() {
  var text = $("#textarea").val();
  var filename = $("#input-fileName").val()
  var blob = new Blob([text], {type: "text/plain;charset=utf-8"});
  saveAs(blob, filename+".txt");
});
body { 
  padding: 1em;
  background: #EEE;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/14082/FileSaver.js"></script>
<form role="form">
  <h3>Saving a file with pure JS!</h3>
  <p>Uses HTML5 W3C saveAs() function and the <a href="https://github.com/eligrey/FileSaver.js" target="_blank">FileSaver.js</a> polyfill for this.<br>
  I didn't think this was even possible without a server but the docs say it should work in IE 10+,  Sweet!</p>
  <div class="form-group">
    <label for="input-fileName">File name</label>
    <input type="text" class="form-control" id="input-fileName" value="textFile" placeholder="Enter file name">
  </div>
  <div class="form-group">
    <label for="textarea">Text</label>
    <textarea id="textarea" class="form-control" rows="10" placeholder="Enter text to save">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae iure ab voluptate sunt reiciendis, officia, aliquam temporibus. Quo laudantium quaerat ad, deleniti optio ex, dignissimos, ea accusamus placeat tempora minima!</textarea>
  </div>
  <button id="btn-save" type="submit" class="btn btn-primary">Save to file</button>
</form>

Upvotes: 1

Related Questions