But limited by browsers, in many cases we can only give a link and let users click to open -> Save As. Such as the following link:
Copy the code code as follows:
<a href="file.js">file.js</a>
When the user clicks this link, the browser will open and display the content of the file pointed to by the link. Obviously, this does not meet our needs. HTML5 adds a download attribute to the a tag. As long as this attribute is present, when the link is clicked, the browser will not open the file pointed to by the link, but download it instead (currently only supported by Chrome, Firefox and Opera).
When downloading, the name of the link will be used directly as the file name, but it can be changed. Just add the desired file name to download, such as: download="not-a-file.js".
But this is not enough. The above method is only suitable for use when the file is on the server. What if you want the browser to download the content generated by js on the browser side?
In fact, there is still a way to do it. I believe many people have heard of the word DataURI. The more common one is the src of the image, such as:
Copy the code code as follows:
<img src="data:image/gif;base64,R0lGOXXXXX">
The explanation of DataURI can be moved here, I will not explain it here.
So, now there is a law to follow when downloading content generated by js. Encapsulated into a method as follows:
Copy the code code as follows:
function downloadFile(aLink, fileName, content){
aLink.download = fileName;
aLink.href = "data:text/plain," + content;
}
After calling downloadFile, the user clicks the link to trigger the browser download.
However, it is not enough. The above method has two shortcomings, which will lead to the loss of many lazy girls:
There are restrictions on the file types that can be downloaded. What should I do if I want to download the processed photos?
You have to click again to download, which is too troublesome.
To solve the file type problem, you can use the browser's new API (URL.createObjectURL) to solve the problem. URL.createObjectURL is usually used to create the DataURI of the image to display the image. Here it is used to download the file and let the browser Help us set the file type.
The parameter of URL.createObjectURL is a File object or a Blob object. The File object is the file selected through input[type=file]. The Blob object is a binary large object. For detailed description, please refer here.
Now, we only need to create an ObjectURL with content and assign it to aLink to solve the file type limitation problem.
Automatic downloading of files is also quite easy. You can build a UI click event yourself and then automatically trigger it to achieve automatic downloading.
Now let’s look at the final code:
Copy the code code as follows:
function downloadFile(fileName, content){
var aLink = document.createElement('a');
var blob = new Blob([content]);
var evt = document.createEvent("HTMLEvents");
evt.initEvent("click", false, false);//initEvent without the last two parameters will report an error under FF. Thanks to Barret Lee for the feedback.
aLink.download = fileName;
aLink.href = URL.createObjectURL(blob);
aLink.dispatchEvent(evt);
}
Now, as soon as downloadFile is called, the file will be automatically downloaded. Isn't it great? ^_^.
Note: Currently (2014-01) Blob and URL.createObjectURL no longer need to add private prefixes in standard browsers, so you can use them with confidence~~ If you are worried, you can check Can I Use.