Create and download files with JS on the browser side

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".

Not enough!

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:

data:image/gif;base64,R0lGOXXXXX">

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:

1234	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.

Not enough!

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

1. Download file type limit dead, Meimei. What if I download the processed fruit?
2. 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:

123456789

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 not add the next two parameters under FF will be an error, thanks to Barret Lee feedback aLink. Download = fileName; aLink. href = URL. Createobjecturl(blob); aLink. Dispatchevent(evt); }

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

Note: currently (2014-01-02) blob and Url.createobjecturl in the standard browser no longer need to add a private prefix, you can rest assured that if you do not rest assured, you can check the can I use.

Reprinted from alloyteam:http://www.alloyteam.com/2014/01/use-js-file-download/

Create and download files with JS on the browser side