Is it possible to write data to file using only JavaScript

Question

I want to Write Data to existing file using JavaScript  I don t want to print it on console  I want to Actually Write data to abc txt  I read many answered question but every where they are printing on console  at some place they have given code but its not working  So please can any one help me How to actually write data to File   I referred the code but its not working  its giving error      Uncaught TypeError  Illegal constructor    on chrome and     SecurityError  The operation is insecure    on Mozilla  var f    sometextfile txt    writeTextFile f   Spoon   writeTextFile f   Cheese monkey   writeTextFile f   Onion    function writeTextFile afilename  output      var txtFile  new File afilename     txtFile writeln output     txtFile close        So can we actually write data to file using only Javascript or NOT

User · Answer

Use the code by the user  useless-code above  https   stackoverflow com a 21016088 327386  to generate the file  If you want to download the file automatically  pass the textFile that was just generated to this function   var downloadFile   function downloadURL url        var hiddenIFrameID    hiddenDownloader       iframe   document getElementById hiddenIFrameID       if  iframe     null            iframe   document createElement  iframe            iframe id   hiddenIFrameID          iframe style display    none           document body appendChild iframe             iframe src   url

User · Answer

Above answer is useful but  I found code which helps you to download text file directly on button click          In this code you can also change filename as you wish  It s pure javascript function with HTML5   Works for me    function saveTextAsFile         var textToWrite   document getElementById  inputTextToSave   value      var textFileAsBlob   new Blob  textToWrite    type  text plain         var fileNameToSaveAs   document getElementById  inputFileNameToSaveAs   value        var downloadLink   document createElement  a        downloadLink download   fileNameToSaveAs      downloadLink innerHTML    Download File       if  window webkitURL    null                   Chrome allows the link to be clicked            without actually adding it to the DOM          downloadLink href   window webkitURL createObjectURL textFileAsBlob             else                  Firefox requires the link to be added to the DOM            before it can be clicked          downloadLink href   window URL createObjectURL textFileAsBlob           downloadLink onclick   destroyClickedElement          downloadLink style display    none           document body appendChild downloadLink              downloadLink click

User · Answer

You can create files in browser using Blob and URL createObjectURL  All recent browsers support this   You can not directly save the file you create  since that would cause massive security problems  but you can provide it as a download link for the user  You can suggest a file name via the download attribute of the link  in browsers that support the download attribute  As with any other download  the user downloading the file will have the final say on the file name though   var textFile   null    makeTextFile   function  text        var data   new Blob  text    type   text plain             If we are replacing a previously generated file we need to        manually revoke the object URL to avoid memory leaks      if  textFile     null          window URL revokeObjectURL textFile              textFile   window URL createObjectURL data           returns a URL you can use as a href     return textFile         Here s an example that uses this technique to save arbitrary text from a textarea   If you want to immediately initiate the download instead of requiring the user to click on a link  you can use mouse events to simulate a mouse click on the link as Lifecube s answer did  I ve created an updated example that uses this technique     var create   document getElementById  create        textbox   document getElementById  textbox       create addEventListener  click   function          var link   document createElement  a        link setAttribute  download    info txt        link href   makeTextFile textbox value       document body appendChild link           wait for the link to be added to the document     window requestAnimationFrame function            var event   new MouseEvent  click          link dispatchEvent event         document body removeChild link                 false

User · Answer

const data    name   Ronn   age  27                  sample json const a   document createElement  a    const blob   new Blob  JSON stringify data     a href   URL createObjectURL blob   a download    sample-profile                         filename to download a click     Check Blob documentation here - Blob MDN to provide extra parameters for file type  By default it will make  txt file

User · Answer

In the case it is not possibile to use the new Blob solution  that is for sure the best solution in modern browser  it is still possible to use this simpler approach  that has a limit in the file size by the way   function download                     var fileContents JSON stringify jsonObject  null  2                   var fileName   data json                    var pp   document createElement  a                    pp setAttribute  href    data text plain charset utf-8     encodeURIComponent fileContents                    pp setAttribute  download   fileName                   pp click                              setTimeout function    download     500      x000D   x000D      download   on  click   function     x000D    function download     x000D      var jsonObject     x000D         name    John   x000D         age   31  x000D         city    New York  x000D         x000D      var fileContents   JSON stringify jsonObject  null  2   x000D      var fileName    data json   x000D   x000D      var pp   document createElement  a    x000D      pp setAttribute  href    data text plain charset utf-8     encodeURIComponent fileContents    x000D      pp setAttribute  download   fileName   x000D      pp click    x000D      x000D    setTimeout function     x000D      download   x000D       500   x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt button id  download  gt Download me lt  button gt  x000D   x000D   x000D

User · Answer

If you are talking about browser javascript  you can not write data directly to local file for security reason  HTML 5 new API can only allow you to read files   But if you want to write data  and enable user to download as a file to local  the following code works       function download strData  strFileName  strMimeType        var D   document          A   arguments          a   D createElement  a            d   A 0           n   A 1           t   A 2      text plain          build download link      a href    data     strMimeType    charset utf-8     escape strData         if  window MSBlobBuilder       IE10         var bb   new MSBlobBuilder            bb append strData           return navigator msSaveBlob bb  strFileName            end if window MSBlobBuilder            if   download  in a      FF20  CH19         a setAttribute  download   n           a innerHTML    downloading              D body appendChild a           setTimeout function                 var e   D createEvent  MouseEvents                e initMouseEvent  click   true  false  window  0  0  0  0  0  false  false  false  false  0  null               a dispatchEvent e               D body removeChild a              66           return true            end if  download  in a              do iframe dataURL download   older W3      var f   D createElement  iframe        D body appendChild f       f src    data      A 2    A 2     application octet-stream      window btoa     base64                 window btoa   window btoa   escape  strData       setTimeout function             D body removeChild f          333       return true      to use it   download  the content of the file    filename txt    text plain

User · Answer

Some suggestions for this -    If you are trying to write a file on client machine  You can t do this in any cross-browser way  IE does have methods to enable  trusted  applications to use ActiveX objects to read write file  If you are trying to save it on your server then simply pass on the text data to your server and execute the file writing code using some server side language  To store some information on the  client side that is considerably small  you can go for cookies  Using the HTML5 API for Local Storage

User · Answer

Yes its possible Here the code is  x000D   x000D  const fs   require  fs    let data    Learning how to write in a file   fs writeFile  Output txt   data   err    gt                   In case of a error throw err       if  err  throw err       x000D   x000D   x000D

User · Answer

I found good answers here  but also found a simpler way   The button to create the blob and the download link can be combined in one link  as the link element can have an onclick attribute   The reverse seems not possible  adding a href to a button does not work     You can style the link as a button using bootstrap  which is still pure javascript  except for styling   Combining the button and the download link also reduces code  as fewer of those ugly getElementById calls are needed   This example needs only one button click to create the text-blob and download it    lt a id  a btn writetofile  download  info txt  href     class  btn btn-primary      onclick  exportFile  This is some dummy data  nAnd some more dummy data  n    a btn writetofile     gt     Write To File  lt  a gt    lt script gt         URL pointing to the Blob with the file contents     var objUrl   null         create the blob with file content  and attach the URL to the downloadlink          NB  link must have the download attribute        this method can go to your library     function exportFile fileContent  downloadLinkId               revoke the old object URL to avoid memory leaks          if  objUrl     null                window URL revokeObjectURL objUrl                        create the object that contains the file data and that can be referred to with a URL         var data   new Blob  fileContent     type   text plain              objUrl   window URL createObjectURL data              attach the object to the download link  styled as button          var downloadLinkButton   document getElementById downloadLinkId           downloadLinkButton href   objUrl          lt  script gt

User · Answer

Try  x000D   x000D  let a   document createElement  a    a href    data application octet-stream   encodeURIComponent  My DATA    a download    abc txt   a click    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  reason  sandbox security restrictions  - but JSFiddle version works - here

[javascript] Is it possible to write data to file using only JavaScript?

Examples related to javascript

Examples related to html