Ajax request binary stream for processing (ajax asynchronous download file)

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

Requirements

The management background needs to be done at any time Download the data report. 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 talking about the implementation method and better operating experience. They are not needed (to give an example where the second method is needed: if the generation is very slow, you need to disable the button during the generation process to prevent continuous generation). If you use it, you can not 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(&#39;a&#39;);
  var url = &#39;download/?filename=aaa.txt&#39;;
  var filename = &#39;data.xlsx&#39;;
  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 completed

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 = &#39;download/?filename=aaa.txt&#39;;
  $.get(url, function (data) {
    console.log(typeof(data))
    blob = new Blob([data])
    var a = document.createElement(&#39;a&#39;);
    a.download = &#39;data.xlsx&#39;;
    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 = &#39;download/?filename=aaa.txt&#39;;
  var xhr = new XMLHttpRequest();
  xhr.open(&#39;GET&#39;, 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(&#39;a&#39;);
        a.download = &#39;data.xlsx&#39;;
        a.href = e.target.result;
        $("body").append(a);  // 修复firefox中无法触发click
        a.click();
        $(a).remove();
      }
    }
  };
  // 发送ajax请求
  xhr.send()
}

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How the Django framework uses the ajax post method (graphic tutorial)

django obtains the ajax post complex object Method (graphic tutorial)

About the problem of passing data in the background through response in Ajax (including code, detailed analysis)

The above is the detailed content of Ajax request binary stream for processing (ajax asynchronous download file). For more information, please follow other related articles on the PHP Chinese website!