欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

VUE脚手架项目中导出EXCEl文件

程序员文章站 2024-03-20 18:03:04
...

API

excel.js

import axios from 'axios';
import {getToken} from '@/utils/token';
/**
 * 导出搬抬单excel
 * @param e 参数
 */
export function excelToMoveList(e) {
  return axios({
    url: window.localStorage.url + `/excel/excelToMoveList?begintime=${e.begintime}&endtime=${e.endtime}&isMove=${e.isMove}&areaCode=${e.areaCode}`,
    type: 'get',
    headers: {
      "Authorization": getToken()  // 传递Token
    },
    responseType: 'blob'
  })
}

Methods

excel.vue

  excelToMoveList() {
        // 参数
        let params = {
          beginTime: this.moveOrder.time,
          endTime: this.moveOrder.time,
          isMove: this.moveOrder.isMove,
          areaCode: this.$store.state.user.areacode
        }
        excel.excelToMoveList(params).then(res => {
          if (!res.data) {
            return
          }
          // 获取后台返回的文件名
          const fileName = res.headers['content-disposition'].split('=')[1];
          const blob = new Blob([res.data], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'});
          const url = window.URL.createObjectURL(blob);
          const aLink = document.createElement("a");
          aLink.style.display = "none";
          aLink.href = url;
          aLink.setAttribute("download", decodeURI(fileName));
          document.body.appendChild(aLink);
          aLink.click();
          document.body.removeChild(aLink); //下载完成移除元素
          window.URL.revokeObjectURL(url); //释放掉blob对象
        }).catch(() => {
          this.$message({message: '文件导出异常', type: 'error', duration: 1000});
        })
      }
    }

注:脚手架中使用request拦截器后无法直接获得header参数,因此api中需要通过axios直接调用

上一篇: EXCEL导出简洁版

下一篇: Session