Create a download file in the browser with JS

Front-end Many projects, there is the need for file download, especially JS generated file content, and then let the browser perform download operations (such as online image editing, online code editing, IPRESST, etc.

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

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

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

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

However, 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?

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

Datauri's explanation can be here, I will not explain.

So, now to download the content of JS generated by the laws. Encapsulated as a method 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 a browser download.
But, not enough, the above approach has two mishap:

The downloaded file type limit is dead,
Download also need to click again, too troublesome.
To resolve a file type problem, You can use the browser's new API (Url.createobjecturl) to solve the problem, Url.createobjecturl is usually used to create images 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 Blob object, which is the files selected by Input[type=file], and the Blob object is a binary large object, which can be referred to in detail here.

Now, we just need to create a objecturl with content and assign a value to ALink to solve the file type limitation problem.
File Automatic download is also very good to do, build a UI click event, and then automatically triggered, you can automatically download it.

Now let's look at the final code:

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

Now, as soon as you call DownloadFile, the file downloads automatically

Create a download file in the browser with JS