前端下载功能的实现

第一种

第一种是后端提供的接口，是一个正好的地址，所以前端是非常的简单的，只需要window.open 或是window.location.assgin( url);

第二种

后端需要你先传筛选条件过去，然后获取到结果；
axios正常写，但是需要注意 要写头部headers与类型responseType！！

然后将文件二进制的格式 通过createObjectURL转为一个可以访问的地址，再创建一个a标签下载下来即可；

 axios.get(url, {
            headers: {
              'content-type': 'application/json; charset=utf-8',
            },
            responseType: 'blob', // --设置请求数据格式
          }).then((res) => {
            const url = window.URL.createObjectURL(new Blob([res.data]));
            const link = document.createElement('a');
            link.style.display = 'none';
            link.href = url;
            link.setAttribute('download', `${xxxxx}.xlsx`);
            document.body.appendChild(link);
            link.click();

第三种

纯前端自己写，没有后端接口的情况。将页面的数据进行导出，生成文件
代码：
我这里的data 假设为

data=[
{id:0, text: 'aaaa'},
{id:1, text: 'bbbb'},
]

new Blob 对象，生成二进制的数据流。type类型可选，要生成word excel 都可以。

function Csvexport(data) {
  const filename = 'corder.csv';
  let csvData = '';
  csvData += `${data.map(item => item.text).join(',')}\n`;
  const blobData = new Blob([new Uint8Array([0xEF, 0xBB, 0xBF]), csvData], { type: 'text/csv' });
  this.downloadRawFile(blobData, filename);
}

然后和第二种的一样，生成一个链接。

function downloadRawFile(blobData, filename) {
  console.log(blobData);
  if (blobData != null && navigator.msSaveBlob) {
    navigator.msSaveBlob(blobData, filename);
    return;
  }
  const link = document.createElement('a');
  link.href = window.URL.createObjectURL(blobData);
  link.setAttribute('download', filename);
  document.body.appendChild(link);
  link.click();
  window.URL.revokeObjectURL(link.href);
  document.body.removeChild(link);
}

第二种与第三种的区别就是 ，有无后端传给前端数据流。第三种就是自己将json数据转换成二进制形式。