Simple way to download files asynchronously with Ajax

The management background needs to download data reports at any time, and the data must be generated in real time and then converted to excel for download. How to solve this problem? The editor below will share with you a simple method for processing Ajax request binary stream (ajax asynchronous download of files). Let's take a look. I hope it can help you.

Abstract: ajax requests a binary stream (file), converts it to Blob for processing or downloads and saves the file

Requirements

The management background needs to download data reports at any time, and the data must be real-time After generation, it is converted to excel for download.

The file is not large. There is an "Export" button on the page. After clicking the button, a save file dialog box will pop up. The two methods are purely about implementation methods and better operating experience. They are not needed (to give an example that requires the second method: if the generation is very slow, you need to disable the button during the generation process to prevent continuous generation). You can not use it if you use it. See

Solution

Method 1

If the interface for requesting files can be changed to GET, you can use this method

<a class="btn btn-primary btn-xs" download="data.xlsx" href="download/?filename=aaa.txt" rel="external nofollow" ><i class="fa fa-share-square-o fa-lg"></i> 导出</a>

or change it to another method, Use js to dynamically create a tag

<button type="button" onclick="download()">导出</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

Cannot use the post method

Cannot disable the button when starting the download and enable the button after the download is completed

Method 2

Many people are saying that the first method is satisfactory. Wrong way

Conventional method, using jquery:

<button type="button" onclick="download()">导出</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');
    a.download = 'data.xlsx';
    a.href=window.URL.createObjectURL(blob)
    a.click()
  })
}

Files saved in this way cannot be opened. Console.log(typeof(data)) will see that it is a string type. The reason is that jquery converts the returned data into string and does not support the blob type.

Correct way

<button type="button" onclick="download()">导出</button>
function download() {
  var url = 'download/?filename=aaa.txt';
  var xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);    // 也可以使用POST方式，根据接口
  xhr.responseType = "blob";  // 返回类型blob
  // 定义请求完成的处理函数，请求前也可以增加加载框/禁用下载按钮逻辑
  xhr.onload = function () {
    // 请求完成
    if (this.status === 200) {
      // 返回200
      var blob = this.response;
      var reader = new FileReader();
      reader.readAsDataURL(blob);  // 转换为base64，可以直接放入a表情href
      reader.onload = function (e) {
        // 转换完成，创建一个a标签用于下载
        var a = document.createElement('a');
        a.download = 'data.xlsx';
        a.href = e.target.result;
        $("body").append(a);  // 修复firefox中无法触发click
        a.click();
        $(a).remove();
      }
    }
  };
  // 发送ajax请求
  xhr.send()
}

Related recommendations:

The above is the detailed content of Simple way to download files asynchronously with Ajax. For more information, please follow other related articles on the PHP Chinese website!