Ajax is a simple method for processing binary streams (ajax asynchronously downloads files ).

Ajax is a simple method for processing binary streams (ajax asynchronously downloads files ).

Abstract: ajax requests a binary stream (File) and converts it to Blob for processing or downloading and saving the file.

Requirement

The management background needs to download data reports at any time. The data must be generated in real time and then converted to excel for download.

The file is not large. Place the "Export" button on the page. click the button and the "save file" dialog box is displayed.

Note: The first method can directly meet the needs of most people using tag a. The second method is purely about implementation methods and a better operation experience, no (for example, if the second method is required: If the generation process is slow, you need to disable the button to prevent continuous generation ).

Solution

Method 1

This method can be used if the interface of the request file can be changed to GET.

<A class = "btn-primary btn-xs" download = "data.xlsx" href = "download /? Filename=aaa.txt "rel =" external nofollow "> <I class =" fa-share-square-o fa-lg "> </I> export </a>

Alternatively, you can use js to dynamically create a tag.

<Button type = "button" onclick = "download ()"> export </button> function download () {var a = document. createElement ('A'); var url = 'Download /? Filename=aaa.txt '; var filename = 'data.xlsx'; a. href = url; a. download = filename; a. click ()}

Disadvantages

The post method cannot be used.

You cannot disable or enable the download when the download is started.

Method 2

Many people are saying that the first method can meet the requirements and is incorrect.

The general method is jquery:

<Button type = "button" onclick = "download ()"> export </button> function download () {var url = 'Download /? Filename=aaa.txt '; $. get (url, function (data) {console. log (typeof (data) blob = new Blob ([data]) var a = document. createElement ('A');. download = 'data.xlsx';. href = window. URL. createObjectURL (blob). click ()})}

Files saved in this way cannot be opened. The console. log (typeof (data) will see the string type, because jquery converts the returned data to the string type and does not support the blob type.

Correct Method

<Button type = "button" onclick = "download ()"> export </button> function download () {var url = 'Download /? Filename=aaa.txt '; var xhr = new XMLHttpRequest (); xhr. open ('get', url, true); // You can also use the POST method, according to the interface xhr. responseType = "blob"; // return type blob // define the processing function of the request. You can also add the loading box or disable the Download button logic xhr before the request. onload = function () {// request to complete if (this. status = 200) {// return 200 var blob = this. response; var reader = new FileReader (); reader. readAsDataURL (blob); // converts it to base64, which can be directly put into an expression href reader. onload = function (e) {// The conversion is complete. Create a tag named a to download var a = document. createElement ('A');. download = 'data.xlsx';. href = e.tar get. result; $ ("body "). append (a); // fixed the failure to trigger click a in firefox. click (); $ (). remove () ;}}; // send an ajax request to xhr. send ()}

Summary

The above is a simple method for processing Ajax request binary streams (ajax asynchronous file download). I hope it will help you. If you have any questions, please leave a message, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!