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', "<html>" + document.getElementsByTagName('html')[0].innerHTML + "</html>");
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 < 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("<html>" + document.getElementsByTagName('html')[0].innerHTML + "</html>")
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("<html>" + document.getElementsByTagName('html')[0].innerHTML + "</html>"))
This question is related to
javascript
jquery
html
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:
<a href="/*assign url here*/" id="link" download="whatever.txt">download me</a>
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'})
);
});
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', "<html>" + document.documentElement.innerHTML + "</html>");
See JavaScript blob filename without link on what to do with that object url, just setting the current location to it doesn't work.
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));
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
const token= "eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJob3NzYW0iLCJUb2tlblR5cGUiOiJCZWFyZXIiLCJyb2xlIjoiQURNSU4iLCJpc0FkbWluIjp0cnVlLCJFbXBsb3llZUlkIjoxLCJleHAiOjE2MTI5NDA2NTksImlhdCI6MTYxMjkzNzA1OX0.8f0EeYbGyxt9hjggYW1vR5hMHFVXL4ZvjTA6XgCCAUnvacx_Dhbu1OGh8v5fCsCxXQnJ8iAIZDIgOAIeE55LUw"
console.log(atob(token.split(".")[1]));
_x000D_
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(...)
Source: Stackoverflow.com