JavaScript Create and save file

Question

I have data that I want to write to a file  and open a file dialog for the user to choose where to save the file   It would be great if it worked in all browsers  but it has to work in Chrome   I want to do this all client-side   Basically I want to know what to put in this function   saveFile  function data        Where the function takes in data  has the user select a location to save the file  and creates a file in that location with that data   Using HTML is fine too  if that helps

User · Answer

You cannot do this purely in Javascript  Javascript running on browsers does not have enough permission yet  there have been proposals  due to security reasons   Instead  I would recommend using Downloadify      A tiny javascript   Flash library that enables the creation and download of text files without server interaction     You can see a simple demo here where you supply the content and can test out saving cancelling error handling functionality

User · Answer

x000D   x000D  function download text  name  type    x000D    var a   document getElementById  a    x000D    var file   new Blob  text    type  type    x000D    a href   URL createObjectURL file   x000D    a download   name  x000D    x000D   lt a href    id  a  gt click here to download your file lt  a gt  x000D   lt button onclick  download  file text    myfilename json    text json    gt Create file lt  button gt  x000D   x000D   x000D    I think this can work with json files too if you change the mime type

User · Answer

For Chrome and Firefox  I have been using a purely JavaScript method    My application cannot make use of a package such as Blob js because it is served from a special engine  a DSP with a WWWeb server crammed in and little room for anything at all    function FileSave sourceText  fileIdentity        var workElement   document createElement  a        if   download  in workElement            workElement href    data      text plain     charset utf-8     escape sourceText           workElement setAttribute  download   fileIdentity           document body appendChild workElement           var eventMouse   document createEvent  MouseEvents            eventMouse initMouseEvent  click   true  false  window  0  0  0  0  0  false  false  false  false  0  null           workElement dispatchEvent eventMouse           document body removeChild workElement         else throw  File saving not supported for this browser       Notes  caveats  and weasel-words    I have had success with this code in both Chrome and Firefox clients running in Linux  Maipo  and Windows  7 and 10  environments  However  if sourceText is larger than a MB  Chrome sometimes  only sometimes  gets stuck in its own download without any failure indication  Firefox  so far  has not exhibited this behavior  The cause might be some blob limitation in Chrome  Frankly  I just don t know  if anybody has any ideas how to correct  or at least detect   please post  If the download anomaly occurs  when the Chrome browser is closed  it generates a diagnostic such as  This code is not compatible with Edge or Internet Explorer  I have not tried Opera or Safari

User · Answer

Choosing the location to save the file before creating it is not possible  But it is possible  at least in Chrome  to generate files using just JavaScript  Here is an old example of mine of creating a CSV file  The user will be prompted to download it  This  unfortunately  does not work well in other browsers  especially IE    lt  DOCTYPE html gt   lt html gt   lt head gt       lt title gt JS CSV lt  title gt   lt  head gt   lt body gt       lt button id  b  gt export to CSV lt  button gt       lt script type  text javascript  gt          function exportToCsv                 var myCsv    Col1 Col2 Col3 nval1 val2 val3                window open  data text csv charset utf-8     escape myCsv                       var button   document getElementById  b            button addEventListener  click   exportToCsv        lt  script gt   lt  body gt   lt  html gt

User · Answer

x000D   x000D  setTimeout  create  Hello world     myfile txt    text plain      x000D  function create text  name  type    x000D    var dlbtn   document getElementById  dlbtn    x000D    var file   new Blob  text    type  type    x000D    dlbtn href   URL createObjectURL file   x000D    dlbtn download   name  x000D    x000D   lt a href  javascript void 0   id  dlbtn  gt  lt button gt click here to download your file lt  button gt  lt  a gt  x000D   x000D   x000D

User · Answer

A very minor improvement of the code by Awesomeness01  no need for anchor tag  with addition as suggested by trueimage  support for IE       Function to download data to a file function download data  filename  type        var file   new Blob  data    type  type        if  window navigator msSaveOrOpenBlob     IE10          window navigator msSaveOrOpenBlob file  filename       else      Others         var a   document createElement  a                    url   URL createObjectURL file           a href   url          a download   filename          document body appendChild a           a click            setTimeout function                 document body removeChild a               window URL revokeObjectURL url                0              Tested to be working properly in Chrome  FireFox and IE10   In Safari  the data gets opened in a new tab and one would have to manually save this file

User · Answer

function SaveBlobAs blob  file name        if  typeof navigator msSaveBlob     function           return navigator msSaveBlob blob  file name        var saver   document createElementNS  http   www w3 org 1999 xhtml    a        var blobURL   saver href   URL createObjectURL blob            body   document body       saver download   file name       body appendChild saver       saver dispatchEvent new MouseEvent  click         body removeChild saver       URL revokeObjectURL blobURL

User · Answer

Javascript has a FileSystem API  If you can deal with having the feature only work in Chrome  a good starting point would be  http   www html5rocks com en tutorials file filesystem

User · Answer

This project on github looks promising    https   github com eligrey FileSaver js     FileSaver js implements the W3C saveAs   FileSaver interface in   browsers that do not natively support it    Also have a look at the demo here    http   eligrey com demos FileSaver js

User · Answer

Tried this in the console  and it works   var aFileParts      lt a id  a  gt  lt b id  b  gt hey  lt  b gt  lt  a gt     var oMyBlob   new Blob aFileParts   type    text html        the blob window open URL createObjectURL oMyBlob

User · Answer

x000D   x000D  function download text  name  type    x000D    var a   document getElementById  a    x000D    var file   new Blob  text    type  type    x000D    a href   URL createObjectURL file   x000D    a download   name  x000D    x000D   lt a href    id  a  gt click here to download your file lt  a gt  x000D   lt button onclick  download  file text    myfilename txt    text plain    gt Create file lt  button gt  x000D   x000D   x000D    And you would then download the file by putting the download attribute on the anchor tag   The reason I like this better than creating a data url is that you don t have to make a big long url  you can just generate a temporary url

User · Answer

For latest browser  like Chrome  you can use the File API as in this tutorial   window requestFileSystem    window requestFileSystem    window webkitRequestFileSystem  window requestFileSystem window PERSISTENT  5 1024 1024   5MB    saveFile  errorHandler

User · Answer

StreamSaver is an alternative to save very large files without having to keep all data in the memory In fact it emulates everything the server dose when saving a file but all client side with service worker   You can either get the writer and manually write Uint8Array s to it or pipe a binary readableStream to the writable stream  There is a few example showcasing    How to save multiple files as a zip  piping a readableStream from eg Response or blob stream   to StreamSaver manually writing to the writable stream as you type something or recoding a video audio   Here is an example in it s simplest form   const fileStream   streamSaver createWriteStream  filename txt    new Response  StreamSaver is awesome   body    pipeTo fileStream     then success  error    If you want to save a blob you would just convert that to a readableStream  new Response blob  body pipeTo         response hack blob stream   pipeTo         feature reference

[javascript] JavaScript: Create and save file

Examples related to javascript

Examples related to file

Examples related to dialog

Examples related to save