Using HTML5 JavaScript to generate and save a file

Question

I ve been fiddling with WebGL lately  and have gotten a Collada reader working  Problem is it s pretty slow  Collada is a very verbose format   so I m going to start converting files to a easier to use format  probably JSON   I already have the code to parse the file in JavaScript  so I may as well use it as my exporter too  The problem is saving   Now  I know that I can parse the file  send the result to the server  and have the browser request the file back from the server as a download  But in reality the server has nothing to do with this particular process  so why get it involved  I already have the contents of the desired file in memory  Is there any way that I could present the user with a download using pure JavaScript   I doubt it  but might as well ask      And to be clear  I am not trying to access the filesystem without the users knowledge  The user will provide a file  probably via drag and drop   the script will transform the file in memory  and the user will be prompted to download the result  All of which should be  safe  activities as far as the browser is concerned    EDIT   I didn t mention it upfront  so the posters who answered  Flash  are valid enough  but part of what I m doing is an attempt to highlight what can be done with pure HTML5    so Flash is right out in my case   Though it s a perfectly valid answer for anyone doing a  real  web app   That being the case it looks like I m out of luck unless I want to involve the server  Thanks anyway

User · Answer

You can generate a data URI   However  there are browser-specific limitations

User · Answer

As previously mentioned the File API  along with the FileWriter and FileSystem APIs can be used to store files on a client s machine from the context of a browser tab window   However  there are several things pertaining to latter two APIs which you should be aware of     Implementations of the APIs currently exist only in Chromium-based browsers  Chrome  amp  Opera  Both of the APIs were taken off of the W3C standards track on April 24  2014  and as of now are proprietary  Removal of the  now proprietary  APIs from implementing browsers in the future is a possibility A sandbox  a location on disk outside of which files can produce no effect  is used to store the files created with the APIs A virtual file system  a directory structure which does not necessarily exist on disk in the same form that it does when accessed from within the browser  is used represent the files created with the APIs   Here are simple examples of how the APIs are used  directly and indirectly  in tandem to do this   BakedGoods   bakedGoods get           data    testFile            storageTypes    fileSystem            options   fileSystem  storageType  Window PERSISTENT            complete  function resultDataObj  byStorageTypeErrorObj          Using the raw File  FileWriter  and FileSystem APIs  function onQuotaRequestSuccess grantedQuota         function saveFile directoryEntry                 function createFileWriter fileEntry                         function write fileWriter                                var dataBlob   new Blob   Hello world      type   text plain                     fileWriter write dataBlob                                            fileEntry createWriter write                      directoryEntry getFile               testFile                 create  true  exclusive  true               createFileWriter                       requestFileSystem Window PERSISTENT  grantedQuota  saveFile      var desiredQuota   1024   1024   1024  var quotaManagementObj   navigator webkitPersistentStorage  quotaManagementObj requestQuota desiredQuota  onQuotaRequestSuccess     Though the FileSystem and FileWriter APIs are no longer on the standards track  their use can be justified in some cases  in my opinion  because    Renewed interest from the un-implementing browser vendors may place them right back on it Market penetration of implementing  Chromium-based  browsers is high Google  the main contributer to Chromium  has not given and end-of-life date to the APIs    Whether  some cases  encompasses your own  however  is for you to decide    BakedGoods is maintained by none other than this guy right here

User · Answer

You can use localStorage  This is the Html5 equivalent of cookies  It appears to work on Chrome and Firefox BUT on Firefox  I needed to upload it to a server  That is  testing directly on my home computer didn t work   I m working up HTML5 examples  Go to http   faculty purchase edu jeanine meyer html5 html5explain html and scroll to the maze one  The information to re-build the maze is stored using localStorage   I came to this article looking for HTML5 JavaScript for loading and working with xml files  Is it the same as older html and JavaScript

User · Answer

OK  creating a data URI definitely does the trick for me  thanks to Matthew and Dennkster pointing that option out  Here is basically how I do it   1  get all the content into a string called  content   e g  by creating it there initially or by reading innerHTML of the  tag of an already built page    2  Build the data URI   uriContent    data application octet-stream     encodeURIComponent content     There will be length limitations depending on browser type etc   but e g  Firefox 3 6 12 works until at least 256k  Encoding in Base64 instead using encodeURIComponent might make things more efficient  but for me that was ok   3  open a new window and  redirect  it to this URI prompts for a download location of my JavaScript generated page   newWindow   window open uriContent   neuesDokument      That s it

User · Answer

Simple solution for HTML5 ready browsers     function download filename  text        var pom   document createElement  a        pom setAttribute  href    data text plain charset utf-8     encodeURIComponent text        pom setAttribute  download   filename        if  document createEvent            var event   document createEvent  MouseEvents            event initEvent  click   true  true           pom dispatchEvent event             else           pom click              Usage  download  test txt    Hello world

User · Answer

Take a look at Doug Neiner s Downloadify which is a Flash based JavaScript interface to do this      Downloadify is a tiny JavaScript   Flash library that enables the generation and saving of files on the fly  in the browser  without server interaction

User · Answer

I ve used FileSaver  https   github com eligrey FileSaver js  and it works just fine  For example  I did this function to export logs displayed on a page  You have to pass an array for the instanciation of the Blob  so I just maybe didn t write this the right way  but it works for me  Just in case  be careful with the replace  this is the syntax to make this global  otherwise it will only replace the first one he meets   exportLogs   function        var array   new Array         var str       logs   html        array 0    str replace   lt br gt  g    n t         var blob   new Blob array   type   text plain charset utf-8         saveAs blob   example log

User · Answer

Simple Solution    x000D   x000D   lt a download  My-FileName txt  href  data application octet-stream HELLO-WORLDDDDDDDD  gt Click here lt  a gt  x000D   x000D   x000D    Works in all Modern browsers

User · Answer

Saving large files  Long data URIs can give performance problems in browsers  Another option to save client-side generated files  is to put their contents in a Blob  or File  object and create a download link using URL createObjectURL blob   This returns an URL that can be used to retrieve the contents of the blob  The blob is stored inside the browser until either URL revokeObjectURL   is called on the URL or the document that created it is closed  Most web browsers have support for object URLs  Opera Mini is the only one that does not support them   Forcing a download  If the data is text or an image  the browser can open the file  instead of saving it to disk  To cause the file to be downloaded upon clicking the link  you can use the the download attribute  However  not all web browsers have support for the download attribute  Another option is to use application octet-stream as the file s mime-type  but this causes the file to be presented as a binary blob which is especially user-unfriendly if you don t or can t specify a filename  See also  Force to open  quot Save As    quot  popup open at text link click for pdf in HTML    Specifying a filename  If the blob is created with the File constructor  you can also set a filename  but only a few web browsers  including Chrome  amp  Firefox  have support for the File constructor  The filename can also be specified as the argument to the download attribute  but this is subject to a ton of security considerations  Internet Explorer 10 and 11 provides its own method  msSaveBlob  to specify a filename   Example code   x000D   x000D  var file  x000D  var data       x000D  data push  This is a test n    x000D  data push  Of creating a file n    x000D  data push  In a browser n    x000D  var properties    type   text plain       Specify the file s mime-type  x000D  try   x000D       Specify the filename using the File constructor  but     x000D    file   new File data   file txt   properties   x000D    catch  e    x000D           fall back to the Blob constructor if that isn t supported  x000D    file   new Blob data  properties   x000D    x000D  var url   URL createObjectURL file   x000D  document getElementById  link   href   url  x000D   lt a id  link  target   blank  download  file txt  gt Download lt  a gt  x000D   x000D   x000D

User · Answer

function download content  filename  contentType        if  contentType  contentType    application octet-stream           var a   document createElement  a            var blob   new Blob  content     type  contentType            a href   window URL createObjectURL blob           a download   filename          a click

User · Answer

I found two simple approaches that work for me  First  using an already clicked a element and injecting the download data  And second  generating an a element with the download data  executing a click   and removing it again  But the second approach works only if invoked by a user click action as well   Some  Browser block click   from other contexts like on loading or triggered after a timeout  setTimeout     lt  DOCTYPE HTML gt   lt html gt     lt head gt       lt meta charset  UTF-8  gt       lt script type  text javascript  gt        function linkDownload a  filename  content            contentType     data application octet-stream            uriContent   contentType   encodeURIComponent content           a setAttribute  href   uriContent           a setAttribute  download   filename                 function download filename  content            var a   document createElement  a            linkDownload a  filename  content           document body appendChild a           a click            document body removeChild a                lt  script gt      lt  head gt     lt body gt       lt a href     onclick  linkDownload this   test txt    Hello World      gt download lt  a gt       lt button onclick  download  test txt    Hello World      gt download lt  button gt     lt  body gt   lt  html gt

User · Answer

This thread was invaluable to figure out how to generate a binary file and prompt to download the named file  all in client code without a server   First step for me was generating the binary blob from data that I was saving  There s plenty of samples for doing this for a single binary type  in my case I have a binary format with multiple types which you can pass as an array to create the blob   saveAnimation  function          var device   this Device      var maxRow   ChromaAnimation getMaxRow device       var maxColumn   ChromaAnimation getMaxColumn device       var frames   this Frames      var frameCount   frames length       var writeArrays             var writeArray   new Uint32Array 1       var version   1      writeArray 0    version      writeArrays push writeArray buffer         console log  version    version         var writeArray   new Uint8Array 1       var deviceType   this DeviceType      writeArray 0    deviceType      writeArrays push writeArray buffer         console log  deviceType    deviceType         var writeArray   new Uint8Array 1       writeArray 0    device      writeArrays push writeArray buffer         console log  device    device         var writeArray   new Uint32Array 1       writeArray 0    frameCount      writeArrays push writeArray buffer         console log  frameCount    frameCount        for  var index   0  index  lt  frameCount    index           var frame   frames index          var writeArray   new Float32Array 1         var duration   frame Duration        if  duration  lt  0 033            duration   0 033                writeArray 0    duration        writeArrays push writeArray buffer            console log  Frame   index   duration   duration          var writeArray   new Uint32Array maxRow   maxColumn         for  var i   0  i  lt  maxRow    i            for  var j   0  j  lt  maxColumn    j              var color   frame Colors i  j             writeArray i   maxColumn   j    color                          writeArrays push writeArray buffer              var blob   new Blob writeArrays   type   application octet-stream          return blob      The next step is to get the browser to prompt the user to download this blob with a predefined name   All I needed was a named link I added in the HTML5 that I could reuse to rename the initial filename  I kept it hidden since the link doesn t need display    lt a id  lnkDownload  style  display  none  download  client chroma  href    target   blank  gt  lt  a gt    The last step is to prompt the user to download the file   var data   animation saveAnimation    var uriContent   URL createObjectURL data   var lnkDownload   document getElementById  lnkDownload    lnkDownload download    theDefaultFileName extension   lnkDownload href   uriContent  lnkDownload click

User · Answer

When testing the  quot ahref quot  method  I found that the web developer tools of Firefox and Chrome gets confused  I needed to restart the debugging after the a click   was issued  Same happened with the FileSaver  it uses the same ahref method to actually make the saving   To work around it  I created new temporary window  added the element a into that and clicked it there      function download json dt            var csv     var data              csv    JSON stringify dt  null  3            var uricontent    data application octet-stream     encodeURI csv            var newwin   window open   quot  quot    quot  blank quot             var elem   newwin document createElement  a            elem download    quot database js quot           elem href   uricontent          elem click            setTimeout function    newwin close       3000

User · Answer

try  x000D   x000D  let a   document createElement  a    a href    data application octet-stream   encodeURIComponent   My DATA     a download    myFile json   a click       we not add  a  to DOM so no need to remove x000D   x000D   x000D   If you want to download binary data look here Update 2020 06 14 I upgrade Chrome to 83 0 and above SO snippet stop works  due to sandbox security restrictions  - but JSFiddle version works - here

User · Answer

Here is a tutorial to export files as ZIP   Before getting started  there is a library to save files  the name of library is fileSaver js  You can find this library here  Let s get started  Now  include the required libraries    lt script src  https   cdnjs cloudflare com ajax libs jszip 3 1 4 jszip min js   type  text javascript  gt  lt  script gt   lt script type  text javascript  src  https   fastcdn org FileSaver js 1 1 20151003 FileSaver js   gt  lt  script gt    Now copy this code and this code will download a zip file with a file hello txt having content Hello World  If everything thing works fine  this will download a file    lt script type  text javascript  gt      var zip   new JSZip        zip file  Hello txt    Hello World n        zip generateAsync  type  blob         then function content               see FileSaver js         saveAs content   file zip             lt  script gt    This will download a file called file zip  You can read more here  http   www wapgee com story 248 guide-to-create-zip-files-using-javascript-by-using-jszip-library

User · Answer

Here is a link to the data URI method Mathew suggested  it worked on safari  but not well because I couldn t set the filetype  it gets saved as  unknown  and then i have to go there again later and change it in order to view the file     http   www nihilogic dk labs canvas2image

User · Answer

HTML5 defined a window saveAs blob  filename  method  It isn t supported by any browser right now  But there is a compatibility library called FileSaver js that adds this function to most modern browsers  including Internet Explorer 10    Internet Explorer 10 supports a navigator msSaveBlob blob  filename  method  MSDN   which is used in FileSaver js for Internet Explorer support   I wrote a blog posting with more details about this problem

[javascript] Using HTML5/JavaScript to generate and save a file

Examples related to javascript

Examples related to html

Examples related to download