后台管理系统下载excel文件

一，实现效果

二，实现代码

第一种方式：使用 window.open打开新窗口，利用get请求获取

//导出表格
    exportExcel(){
      let params={
        exportType:0,
        platform:this.plat,
        ...this.form
      }
      if(this.content!==''){
        params.content=this.content
      }
      if(this.radioChange!=='全部'){
        params.status=this.state
      }
      let exportParams = Object.keys(params).map(key => {
          return (encodeURIComponent(key) + "=" + encodeURIComponent(params[key]));
      }).join("&");
      window.open(
        `${document.location.origin}/dcxt/shop/api/takeaway/export?${exportParams}`
      );
      // console.log(
      //   `${document.location.origin}/dcxt/shop/api/takeaway/export?${exportParams}`
      // );
      
    },

主要就是那一行window.open（）的代码

第二种方式：使用iframe

  /**
   * 使用iframe方式下载文件
   * @param {String} url 下载地址
   */
  downloadFile() {
  let params = {
        token: this.userInfo.token,
        ccbvaVersion: 'V2',
        TXCODE: 'VAOI02'
      };
      Object.assign(params, this.formDataQuery);
      let exportParams = Object.keys(params)
        .map(key => {
          return (
            encodeURIComponent(key) + '=' + encodeURIComponent(params[key])
          );
        })
        .join('&');
    let downloadUrl = `${this.$baseAPIs.serverOne}/ExportCmpActiveStatisticsServlet?${exportParams}`;
    let elemIF = document.createElement('iframe');
    elemIF.src = downloadUrl;
    elemIF.style.display = 'none';
    document.body.appendChild(elemIF);
    return;
  },

第三种方式：使用a标签

  let params = {
        token: this.userInfo.token,
        ccbvaVersion: 'V2',
        TXCODE: 'VAOI02'
      };
      Object.assign(params, this.formDataQuery);
      let exportParams = Object.keys(params)
        .map(key => {
          return (
            encodeURIComponent(key) + '=' + encodeURIComponent(params[key])
          );
        })
        .join('&');
    let downloadUrl = `${this.$baseAPIs.serverOne}/ExportCmpActiveStatisticsServlet?${exportParams}`;
    this.axios({
        url: downloadUrl,
        method: 'get', // 默认值
        responseType: 'blob'
      })
        .then(response => {
          console.log('---', response);
          let blob = new Blob([response.data], {
            type: 'application/vnd.ms-excel'
          });
          let downloadElement = document.createElement('a'); // 创建a标签
          let href = window.URL.createObjectURL(blob); // 创建下载的链接
          downloadElement.href = href;
          downloadElement.download = 'test.xlsx'; // 下载后文件名
          document.body.appendChild(downloadElement);
          downloadElement.click(); // 点击下载
          document.body.removeChild(downloadElement); // 下载完成移除元素
          window.URL.revokeObjectURL(href); // 释放掉blob对象
        })
        .catch(error => {
          console.log(error);
        });