Failed to execute atob on Window

Question

I m trying to save my HTML file in Chrome when the user presses ctrl   s keys but Chrome is crashed    I want to download just the source code of my HTML file   I read that it happens because my file is bigger than 1 99M    In the first attempt  before I knew about the crashing in Chrome    function download filename  text        var pom   document createElement  a        pom setAttribute  href    data text plain charset utf-8     encodeURIComponent text        pom setAttribute  download   filename       pom click       download  test html     lt html gt     document getElementsByTagName  html   0  innerHTML     lt  html gt       The second attempt  after I read about the crashing  I used blob   function dataURItoBlob dataURI        var byteString   atob dataURI split      1         var mimeString   dataURI split      0  split      1  split      0       var ab   new ArrayBuffer byteString length       var ia   new Uint8Array ab       for  var i   0  i  lt  byteString length  i              ia i    byteString charCodeAt i              var bb   new BlobBuilder        bb append ab       return bb getBlob mimeString      function download dataURI        var blob   dataURItoBlob dataURI       var url    window URL createObjectURL blob       window location assign url      download   lt html gt     document getElementsByTagName  html   0  innerHTML     lt  html gt      Here I got the error  Failed to execute  atob  on  Window   The string to be decoded is not correctly encoded   I don t know  but I read that I need to encode my string to base64  How can you encode a string to Base64 in JavaScript   There is an answer of 148 votes  I paste it in my code and don t know how to continue   Where should I call it and how  Can I put a name on my saved file   I think that I need to do something like   download  utf8 decode   lt html gt     document getElementsByTagName  html   0  innerHTML     lt  html gt

User · Answer

you don t need to pass the entire encoded string to atob method  you need to split the encoded string and pass the required string to atob method  x000D   x000D  const token   eyJhbGciOiJIUzUxMiJ9 eyJzdWIiOiJob3NzYW0iLCJUb2tlblR5cGUiOiJCZWFyZXIiLCJyb2xlIjoiQURNSU4iLCJpc0FkbWluIjp0cnVlLCJFbXBsb3llZUlkIjoxLCJleHAiOjE2MTI5NDA2NTksImlhdCI6MTYxMjkzNzA1OX0 8f0EeYbGyxt9hjggYW1vR5hMHFVXL4ZvjTA6XgCCAUnvacx Dhbu1OGh8v5fCsCxXQnJ8iAIZDIgOAIeE55LUw  console log atob token split      1     x000D   x000D   x000D

User · Answer

In my case  I was going nuts since there wasn t any issues with the string to be decoded  since I could successfully decode it on online tools   Until I found out that you first have to decodeURIComponent what you are decoding  like so   atob decodeURIComponent dataToBeDecoded

User · Answer

Here I got the error  Failed to execute  atob  on  Window   The string to be decoded is not correctly encoded    Because you didn t pass a base64-encoded string  Look at your functions  both download and dataURItoBlob do expect a data URI for some reason  you however are passing a plain html markup string to download in your example   Not only is HTML invalid as base64  you are calling  split      1  on it which will yield undefined - and  undefined  is not a valid base64-encoded string either      I don t know  but I read that I need to encode my string to base64   That doesn t make much sense to me  You want to encode it somehow  only to decode it then      What should I call and how    Change the interface of your download function back to where it received the filename and text arguments   Notice that the BlobBuilder does not only support appending whole strings  so you don t need to create those ArrayBuffer things   but also is deprecated in favor of the Blob constructor      Can I put a name on my saved file    Yes  Don t use the Blob constructor  but the File constructor   function download filename  text        try           var file   new File  text   filename   type  text plain           catch e               when File constructor is not supported         file   new Blob  text    type  text plain               var url    window URL createObjectURL file              download  test html     lt html gt     document documentElement innerHTML     lt  html gt       See JavaScript blob filename without link on what to do with that object url  just setting the current location to it doesn t work

User · Answer

BlobBuilder is obsolete  use Blob constructor instead   URL createObjectURL new Blob    whatever content       type  text plain        This returns a blob URL which you can then use in an anchor s href  You can also modify an anchor s download attribute to manipulate the file name    lt a href    assign url here    id  link  download  whatever txt  gt download me lt  a gt    Fiddled  If I recall correctly  there are arbitrary restrictions on trusted non-user initiated downloads  thus we ll stick with a link clicking which is seen as sufficiently user-initiated     Update  it s actually pretty trivial to save current document s html  Whenever our interactive link is clicked  we ll update its href with a relevant blob  After executing the click-bound event  that s the download URL that will be navigated to       link   on  click   function e     this href   URL createObjectURL      new Blob  document documentElement outerHTML     type  text html               Fiddled again

User · Answer

here s an updated fiddle where the user s input is saved in local storage automatically   each time the fiddle is re-run or the page is refreshed the previous state is restored   this way you do not need to prompt users to save  it just saves on it s own   http   jsfiddle net tZPg4 9397   stack overflow requires I include some code with a jsFiddle link so please ignore snippet    localStorage setItem

[javascript] Failed to execute 'atob' on 'Window'

Examples related to javascript

Examples related to jquery

Examples related to html