前端怎么对接后端的导出接口

背景

做开发系统的，经常遇到导出功能，一般就是导出表格。怎么对接后端人员给的导出接口？

实现

// 导出
exportExcel() {
   // 1、首先进行参数校验
   if (!this.search.formDate) {
       return this.$notify.error("必须选择一个时间");
   }
   if (!this.shopId) {
       return this.$notify.error("请选择门店");
   }
   
   // 2、参数     
   const param = {
         startTime: this.search.formDate[0]? Util.formatTime(new Date(this.search.formDate[0])) : undefined,
         endTime: this.search.formDate[1]? Util.formatTime(new Date(this.search.formDate[1])) : undefined
   };
   param.selectedCurrentShopId = this.shopId;

   // 3、服务链接地址（https://域名:端口） + 接口路径 + 参数
   const exportExcelUrl = URLApiBase + '/xxx/xxx/导出接口路径?' + this.QS(param);
   
   // 4、路径是否要补充token
   let paramUrl = '';
   if (window.localStorage.getItem('userToken')) {
       paramUrl = `&userToken=${window.localStorage.getItem('userToken')}`
   }

   // 5、打开处理好的地址
   window.open(exportExcelUrl + paramUrl);

},

// 参数URI编码：为了避免服务器收到不可预知的请求，对任何用户输入的作为URI部分的内容你都需要用
// encodeURIComponent进行转义
QS(data) {
    const ret = [];
    for (const item in data) {
        if (data[item] !== undefined && data[item] !== null) {
            ret.push(encodeURIComponent(item) + '=' + encodeURIComponent(data[item]));
        }
    }
    return ret.join('&');
}

总结

对接导出接口，主要是用 window.open(url) 打开相应的地址就可以下载导出的文件了