How to make a browser display a save as dialog so the user can save the content of a string to a file on his system

Question

How can I make a browser display a  save as dialog  so the user can save the content of a string to a file on his system   For example   var myString    my string with some stuff   save to filesystem myString  myString txt      Resulting in something like this

User · Answer

This is possible using this cross browser javascript implementation of the HTML5 saveAs function: https://github.com/koffsyrup/FileSaver.js

If all you want to do is save text then the above script works in all browsers(including all versions of IE), using nothing but JS.

User · Answer

There is a new spec called the Native File System API that allows you to do this properly like this   const result   await window chooseFileSystemEntries   type   save-file        There is a demo here  but I believe it is using an origin trial so it may not work in your own website unless you sign up or enable a config flag  and it obviously only works in Chrome  If you re making an Electron app this might be an option though

User · Answer

In case anyone is still wondering      I did it like this    lt a href  data application xml charset utf-8 your code here  download  filename html  gt Save lt  a gt   cant remember my source but it uses the following techniques features    html5 download attribute data uri s   Found the reference   http   paxcel net blog savedownload-file-using-html5-javascript-the-download-attribute-2     EDIT  As you can gather from the comments this does NOT work in   Internet Explorer  works in Edge v13 though  iOS Safari Opera Mini   http   caniuse com  feat download

User · Answer

Using execComand    lt input type  button  name  save  value  Save  onclick  javascript document execCommand  SaveAs   true   your file txt    gt    In the next link  execCommand

User · Answer

There is a javascript library for this  see FileSaver js on Github  However the saveAs   function won t send pure string to the browser  you need to convert it to blob   function data2blob data  isBase64      var chars          if  isBase64      chars   atob data     else     chars   data     var bytes   new Array chars length     for  var i   0  i  lt  chars length  i          bytes i    chars charCodeAt i          var blob   new Blob  new Uint8Array bytes       return blob      and then call saveAs on the blob  as like   var myString    my string with some stuff   saveAs  data2blob myString    myString txt       Of course remember to include the above-mentioned javascript library on your webpage using  lt script src FileSaver js gt

User · Answer

Solution using only javascript function saveFile fileName urlFile       let a   document createElement  quot a quot        a style    quot display  none quot       document body appendChild a       a href   urlFile      a download   fileName      a click        window URL revokeObjectURL url       a remove       let textData    El contenido del archivo que sera descargado   let blobData   new Blob  textData    type   quot text plain quot     let url   window URL createObjectURL blobData     let url    quot pathExample localFile png quot      LocalFileDownload saveFile  archivo txt  url

[javascript] How to make a browser display a "save as dialog" so the user can save the content of a string to a file on his system?

Examples related to javascript

Examples related to save

Examples related to savefiledialog