Use JS to create download files in the browser_javascript skills

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 code The code is as follows:

file.js

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 code The code is as follows:

DataURI The explanation can be moved here, I will not explain it here.

So, now there is a legal basis for downloading content generated by js. Encapsulated into a method as follows:

Copy code The code is 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:

The file types that can be downloaded are restricted. 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 problem of file type, you can use the browser's new API (URL.createObjectURL) to solve the problem. URL.createObjectURL is usually used to create images. DataURI is used to display images. Here it is used to download files. Let The browser helps 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 take a look at the final code:

Copy the code The code is 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 his 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.