标签：const 表格 excel 导出 param filename window href blob

前端表格数据导出为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);
    }

标签：const,表格,excel,导出,param,filename,window,href,blob
来源： https://blog.csdn.net/weixin_50641294/article/details/120151223

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。