vue导出

首先说说导出的思路：
导出分为两种情况：

1. get请求
2. post请求

post请求又分为两种情况：

1. 后端返回流文件
2. 后端返回数据

get请求：

exportEvent(){
  let timeSlot = this.form.timeSlot;
  let serviceName = this.form.serviceName；
  //测试环境
  //let url = `http://192.168.30.14:8888/add/v1/test/export?timeSlot=${timeSlot}&serviceId=${serviceId}`;
  //自动获取环境的地址
  let url = `${process.env.VUE_APP_BASE_API}/test/export??timeSlot=${timeSlot}&serviceName=${serviceName}`;
  var $a = document.createElement('a');
  $a.setAttribute("href", url);
  $a.setAttribute("download", "");

  //兼容火狐
  //a.dispatchEvent(new MouseEvent('click', {bubbles: true, cancelable: true, view: window}));
  var evObj = document.createEvent('MouseEvents');
  evObj.initMouseEvent( 'click', true, true, window, 0, 0, 0, 0, 0, false, false, true, false, 0, null);
  $a.dispatchEvent(evObj);

  //导出功能兼容FireFox的代码
  var explorer = window.navigator.userAgent;
  if (explorer.indexOf("Firefox") >= 0) {
    //alert('Firefox');
    var downloadLink = document.createElement("a");
    downloadLink.href = url;
    //downloadLink.download = '统计.xls';
    document.body.appendChild(downloadLink);
    downloadLink.click();
    document.body.removeChild(downloadLink);
  }
}

post请求：
1.后端返回json数据，前端自己做下载

exportTxt(this.bid).then(res => {
  this.exportRaw("result.txt", JSON.stringify(res));
});


//导出文件
exportRaw(name, data) {
  var urlObject = window.URL || window.webkitURL || window;
  var export_blob = new Blob([data]);
  var save_link = document.createElementNS(
    "http://www.w3.org/1999/xhtml",
    "a"
  );
  save_link.href = urlObject.createObjectURL(export_blob);
  save_link.download = name;
  this.fakeClick(save_link);
}

2.后端返回流文件，此时前端需要解析

exportExcel: function(form) {
     return axios({ // 用axios发送post请求
         method: ‘post‘,
         url: ‘/serviceTime/exportData‘, // 请求地址
         data: form, // 参数
         responseType: ‘blob‘, // 表明返回服务器返回的数据类型
         headers: {
             ‘Content-Type‘: ‘application/json‘
         }
     })
 }

const params = {
    test: ‘111
}
exportExcel(params).then(res => { // 处理返回的文件流
    const blob = new Blob([res]);
    const fileName = ‘统计.xlsx‘;
    const elink = document.createElement(‘a‘);
    elink.download = fileName;
    elink.style.display = ‘none‘;
    elink.href = URL.createObjectURL(blob);
    document.body.appendChild(elink);
    elink.click();
    URL.revokeObjectURL(elink.href); // 释放URL 对象
    document.body.removeChild(elink);
})