Create a download file in the browser with JS _javascript tips

But limited by the browser, in many cases we can only give a link, let the user click Open-"Save As." This link is as follows:

Copy Code code as follows:

<a href= "File.js" >file.js</a>

When the user clicks on the link, the browser opens and displays the contents of the link to the file, which obviously does not fulfill our needs. HTML5 adds a download attribute to the a tag, as long as there is this property, the browser does not open the link to the file when clicked, but instead downloads (currently only Chrome, Firefox and opera support).

Download will be directly using the name of the link as a file name, but can be changed, as long as the download add the desired file name, such as: download= "not-a-file.js."

But this is not enough, the above method is only suitable for the case where the file is on the server. If the browser-side JS generated content, want to let the browser to download how to do it?

In fact, there are ways to do, I believe a lot of people have heard the word datauri, more common is the picture of SRC, such as:

Copy Code code as follows:

Datauri explanation can be here, I will not explain.

Then, now to the content of JS generated by the laws of the download. Encapsulated into a method as follows:

Copy Code code as follows:

function DownloadFile (ALink, fileName, content) {

Alink.download = FileName;
Alink.href = "Data:text/plain," + content;
}

After calling DownloadFile, the user clicks on the link to trigger the browser to download.

However, it is not enough, the above method has two a mishap, will lead to the loss of a lot of lazy Meimei:

Download file type limit dead, Meimei to download the processing after the fruit photo how to do?
Download and click again, too much trouble.
To resolve a problem with the file type, You can use the browser's new API (Url.createobjecturl) to solve the problem, Url.createobjecturl is usually used to create pictures Datauri used to display pictures, here to download files, let the browser to help us set the file type.

The Url.createobjecturl parameter is a file object or a Blob object, which is the files selected by the Input[type=file], and the Blob object is a binary large object, which can be referenced here.

Now, all we need to do is create a objecturl with the content and assign it to ALink to fix the file type limitations.
Automatic downloading of files is also very good to do, build a UI click event, and then automatically trigger, you can automatically download it.

Now look at the final code:

Copy 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 latter two parameters in FF will be an error, thanks to Barret Lee's feedback
Alink.download = FileName;
Alink.href = Url.createobjecturl (BLOB);
Alink.dispatchevent (EVT);
}

Now, as soon as a call to DownloadFile, the file is automatically downloaded, is not very cool, ^_^.

Note: The current (2014-01) Blob and Url.createobjecturl in the standard browser no longer need to add a private prefix, you can rest assured that the use of La La ~ ~ If you do not trust, you can check the could I uses.