无痛学习ajax下载文件及条件筛选下载

说到下载，那应该是我们平时工作生活中最常见的功能需求之一了吧，虽然需求基本都是大同小异，但对于技术人员来说，如何让相同的功能展现出不同的实现方法与思路，那又是另一回事了。

今天我们来聊聊基于ajax实现文件下载，并且也会讲到条件筛选下载。大家都知道，传统下载一般是通过传统的表单提交方式来实现，表单提交完后台返回下载文件，形式有file与base64两种，file会以临时文件的形式存储在服务器上，下载完成后会自动删除。base64会将文件直接编码在页面上，利用ajax异步下载也是这两种形式，区别就是ajax下载不需要我们去手动点击，直接就可以触发后台下载。


ajax方式下载的实现，第一种方法是直接把url地址转成dataUrl格式，让后台可以直接拿到文件地址然后返回文件二进制流，这样子浏览器就可以直接打开下载文件了。代码如下：

let url = '你的文件路径';
let fileType = '你的文件类型';
let fileName = '你的文件名';
let blob = new Blob([url], { type: fileType });
let blobUrl = window.URL.createObjectURL(blob);
let a = document.createElement('a');
a.setAttribute('download', fileName);
a.setAttribute('href', blobUrl);
a.click();
window.URL.revokeObjectURL(blobUrl);

第二种方法是利用html5文件系统，通过ajax拿到二进制流并转化成数组。代码如下：

let url = '你的文件路径';
let xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'blob';
xhr.onload = function() {
  if (xhr.status == 200) {
    let blob = xhr.response;
    let fileType = xhr.getResponseHeader('Content-Type');
    let fileName = xhr.getResponseHeader('Content-Disposition').split('filename=')[1].replace(/"/g, "");
    let blobUrl = window.URL.createObjectURL(blob);
    let a = document.createElement('a');
    a.setAttribute('download', fileName);
    a.setAttribute('href', blobUrl);
    a.click();
    window.URL.revokeObjectURL(blobUrl);
  }
};
xhr.send();

这两个方法都是基于ajax实现临时文件下载，区别就在于一个是以dataUrl形式传参，一个是以blob对象形式传参。但这两个方法有一个共同的缺点，就是不能实现条件筛选下载，因为这些方法都是直接通过url地址来实现下载，后台无法获知我们是否有筛选条件。

那么如何实现条件筛选下载呢？其实很简单，只需要把我们的筛选条件通过ajax传到后台，然后后台根据条件筛选出需要下载的数据，最后再返回下载文件，即可实现条件筛选下载。代码如下：

let url = '你的文件路径';
let data = '你的筛选条件';
let xhr = new XMLHttpRequest();
xhr.open('POST', url, true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onload = function() {
  if (xhr.status == 200) {
    let blob = xhr.response;
    let fileType = xhr.getResponseHeader('Content-Type');
    let fileName = xhr.getResponseHeader('Content-Disposition').split('filename=')[1].replace(/"/g, "");
    let blobUrl = window.URL.createObjectURL(blob);
    let a = document.createElement('a');
    a.setAttribute('download', fileName);
    a.setAttribute('href', blobUrl);
    a.click();
    window.URL.revokeObjectURL(blobUrl);
  }
};
xhr.send(JSON.stringify(data));

至此，我们已经实现了基于ajax的临时文件下载及条件筛选下载，希望对大家有所帮助。