How to implement ajax asynchronous downloading of files

This time I will bring you the implementation method of ajax asynchronous downloading of files. What are the precautions for ajax asynchronous downloading of files? The following is a practical case, let's take a look.

Summary: ajax requests a binary stream (file), converts it to a 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 generated in real time and then 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

The interface for requesting files can be changed to GET then 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 way and 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

The post method cannot be used

You cannot disable the button when starting the download and enable the button after the download is complete

Method 2

Many people are talking about the first method The method can be satisfied. Error method

Conventional method, use 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 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()
}

##I believe you have mastered the method after reading the case in this article. For more exciting content, please pay attention to other related articles on the php Chinese website! Recommended reading:

How does AjaxFileUpload dynamically add a file upload box

Practical summary of Ajax and jsonp in the project

The above is the detailed content of How to implement ajax asynchronous downloading of files. For more information, please follow other related articles on the PHP Chinese website!