82987

Creating Javascript Blob() with data from HTML Element. Then downloading it as a text file

Question:

I'm using an HTML5 site to create a log per-say within a textarea element. I need to pull the data from that area with the click of a button, and download it to my computer via a .txt file. How would I go about doing this if it is possible??

HTML:

<input type="button" onclick="newBlob()" value="Clear and Export">

Javascript:

function newBlob() { var blobData = document.getElementById("ticketlog").value; var myBlob = new Blob(blobData, "plain/text"); blobURL = URL.createObjectURL(myBlob); var href = document.createElement("a"); href.href = blobURL; href.download = myBlob; href.id = "download" document.getElementById("download").click(); }

I figure if I make the Blob, create a URL for it, map the URL to an "a" element then auto-click it then it should work in theory. Obviously I'm missing something though. Any help would be fantastic. 1st question on this site btw:p

Answer1:

The simplest way I've come up with is as follows:

function download(text, filename){ var blob = new Blob([text], {type: "text/plain"}); var url = window.URL.createObjectURL(blob); var a = document.createElement("a"); a.href = url; a.download = filename; a.click(); } download("this is the file", "text.txt");

List of possible blob filestypes: <a href="http://www.freeformatter.com/mime-types-list.html" rel="nofollow">http://www.freeformatter.com/mime-types-list.html</a>

Answer2:

const downloadBlobAsFile = (function closure_shell() { const a = document.createElement("a"); return function downloadBlobAsFile(blob, filename) { const object_URL = URL.createObjectURL(blob); a.href = object_URL; a.download = filename; a.click(); URL.revokeObjectURL(object_URL); }; })(); document.getElementById("theButton").addEventListener("click", _ => { downloadBlobAsFile(new Blob( [document.getElementById("ticketlog").value], {type: "text/plain"} ), "result.txt"); });

The value of a <strong>download property</strong> of an <a> element is <strong>the name of the file to download</strong>, and <a href="https://developer.mozilla.org/en/docs/Web/API/Blob/Blob" rel="nofollow">the constructor of Blob is Blob(array, options)</a>.

Answer3:

I used this approach that doesn't involve creating an element and revokes the textFile after the browser showed the text file

var text = 'hello blob'; var blob = new Blob([text], { type: 'text/plain' }); let textFile = window.URL.createObjectURL(blob); let window2 = window.open(textFile, 'log.' + new Date() + '.txt'); window2.onload = e => window.URL.revokeObjectURL(textFile);

Recommend

  • How to get a list of all blobs in a repository in Git
  • How to get or calculate size of Azure File/Share or Service
  • Selecting a subset of data in ServiceStack.OrmLite
  • Using Nested Table variables / Collections in SQL inside PL/SQL blocks
  • How can I let users share their location in Bot Framework webchat channel?
  • Making Google Visualization - Annotation Chart to work in GWT
  • HttpURLConnection Closing IO Streams
  • How to 'create temp table as select' in Slick?
  • Update Google Maps traffic layer without page reloading
  • Button click event not firing in jQuery
  • Chart.js Multiple dataset
  • Parsing a CSV string while ignoring commas inside the individual columns
  • How do I get HTML corresponding to current DOM tree?
  • JQuery Internet Explorer and ajaxstop
  • JSON response opens as a file, but I can't access it with JavaScript
  • HTML download movie download link
  • Updating server-side rendering client-side
  • Where to put my custom functions in Wordpress?
  • Can I have the cursor start on a particular column by default in jqgrid's edit mode?
  • 'TypeError' while using NSGA2 to solve Multi-objective prob. from pyopt-sparse in OpenMDAO
  • Change an a tag attribute in JavaScript based on screen width
  • How to limit post in wp_query
  • Websockets service method fails during R startup
  • bootstrap to use multiple ng-app
  • Comma separated Values
  • How to delete a row from a dynamic generate table using jquery?
  • How to set the response of a form post action to a iframe source?
  • Setting background image for body element in xhtml (for different monitors and resolutions)
  • python draw pie shapes with colour filled
  • Are Kotlin's Float, Int etc optimised to built-in types in the JVM? [duplicate]
  • Running Map reduces the dimensions of the matrices
  • Reading document lines to the user (python)
  • Binding checkboxes to object values in AngularJs
  • Observable and ngFor in Angular 2
  • How to Embed XSL into XML
  • UserPrincipal.Current returns apppool on IIS
  • Conditional In-Line CSS for IE and Others?
  • Net Present Value in Excel for Grouped Recurring CF
  • jQuery Masonry / Isotope and fluid images: Momentary overlap on window resize
  • How to load view controller without button in storyboard?