ajax asynchronous download file-JS Tutorial-php.cn

ajax asynchronous download file

php中世界最好的语言

Release： 2018-04-25 14:35:39

Original

2253 people have browsed it

This time I will bring you 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>

Copy after login

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()
 }

Copy after login

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()
  })
}

Copy after login

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()
}

Copy after login

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