前端表格数据导出为excel表

前端表格数据导出为excel表

1. 先写一个请求导出的请求地址

export function exportExcelAPI(id) {
  return `${BASEURL}/assessment/exportExcel?id=${id}`;
}

2.引入请求地址

import {
  exportExcelAPI
} from '@/api/modules/constructManagement/majorGroupAssess';

3.点击导出按钮做处理

 exportExcel() {
      const data = {
        id: this.treeId
        // name: '学校表彰情况',
      };
      console.log('333333333333', data);
      this.postDownload(exportExcelAPI(this.treeId));  //获取请求完整地址,传过去
    },
    async postDownload(url) {
      const request = (url, method = 'get', options) => {
        return axios.request({
          url,

          method,
          ...options
        });
      };
      const defaultOptions = {
        responseType: 'arraybuffer'
      };

      await request(url, 'get', defaultOptions)
        .then((res) => {
          if (res.status === 200) {
            console.log('33333', res);
            this.downloadFile(res.data, this.fileName + '.xlsx');
          }
        })
        .catch((error) => {
          this.$message.error('导出失败');

          console.error(error);
        });
    },
    /**
     * blob下载(兼容IE)
     * @param {String} content 文件内容
     * @param {String} filename 文件名
     */
    downloadFile(content, filename) {
      const blob = new Blob([content], { type: 'application/vnd.ms-excel' });
      // IE
      if (window.navigator && window.navigator.msSaveOrOpenBlob) {
        window.navigator.msSaveOrOpenBlob(blob, filename);
      } else {
        this.imatateDownloadByA(window.URL.createObjectURL(blob), filename);
      }
    },
    /**
     * 通过a标签模拟下载
     * @param {String} href
     * @param {String} filename
     */
    imatateDownloadByA(href, filename) {
      const a = document.createElement('a');
      a.download = filename;
      a.style.display = 'none';
      a.href = href;
      document.body.appendChild(a);
      a.click();
      a.remove();
      // 释放掉blob对象
      window.URL.revokeObjectURL(href);
    }
上一篇:OpenMv基础知识


下一篇:前端导出文件流