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

最新推荐文章于 2023-04-09 00:22:25 发布

zqian1994

最新推荐文章于 2023-04-09 00:22:25 发布

阅读量513

点赞数

分类专栏： Vue 文章标签： vue 导出excel axios

本文链接：https://blog.csdn.net/zqian1994/article/details/96473817

版权

Vue 专栏收录该内容

31 篇文章 1 订阅

订阅专栏

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直接调用