Use JS to create and download a file in a browser _ javascript tips-js tutorial

Many front-end projects require file downloading, especially file content generated by JS, then let the browser perform the download operation (such as online image editing, online code editing, iPresst, etc.). However, due to browser limitations, in many cases, we can only provide a link, let the user click Open-Save. See the following link:

The Code is as follows:

File. js

When you click this link, the browser will open and display the file content pointed to by the link. Obviously, this does not meet our needs. In HTML5, a download attribute is added to tag a. When you click this link, the browser does not open the file pointed to by the link, instead, download it (currently only supported by chrome, firefox, and opera ).

Download will directly use the name of The Link as the file name, but can be changed, as long as you add the desired file name to download, such as: download = "not-a-file.js ".

However, this is not enough. The above method is only suitable for files on the server. How can I download the content generated by js on the browser?

In fact, there is still a way to do this. I believe many people have heard of the word DataURI. The common one is the image src, such:

The Code is as follows:

DataURI can be explained here, so I will not explain it.

Now, you can download the js-generated content. The method is encapsulated as follows:

The Code is as follows:

Function downloadFile (aLink, fileName, content ){

ALink. download = fileName;
ALink. href = "data: text/plain," + content;
}

After downloadFile is called, you can click the link to trigger Browser Download.

However, it is not enough. The above method has two hard injuries, which will lead to the loss of many lazy girls:

The type of the downloaded file is too limited. What should I do if Meimei wants to download the processed image?
It is too troublesome to download and click again.
To solve the file type problem, you can use the new API of the browser (URL. createObjectURL) to solve the problem, URL. createObjectURL is generally used to create a DataURI for displaying images. Here, it is used to download files and let the browser help us set the file type.

The parameters of URL. createObjectURL are File objects or Blob objects. The File object is the object selected through input [type = file]. Blob objects are large binary objects. For details, refer to here.

Now, we only need to use content to create an ObjectURL and assign it to aLink to solve the file type restriction problem.
Automatic File Download is also quite easy. You can build a UI click event and then automatically download it.

Now let's look at the final 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); // if the last two parameters are not added to initEvent, an error will be reported in FF. Thanks to the feedback from Barret Lee.
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 so nice? ^ _ ^.

Note: currently (2014-01) Blob and URL. createObjectURL do not require a private prefix in the standard browser. You can safely use ~~ If you are not at ease, check Can I Use.