vue导出excel表格

1,vue导出导出excel表格，以下为我的代码，此处只提供一个简单的例子，单个导出，如果想很多地方用到，自己也可以在封装下。
// 导出
exportList() {
const param={
pageSize:10,
pageNum:this.current
}
this.$request(api/xjTask/export, ‘export’, param,).then((res) => {
console.log(res）//在这里打印一下数据 看res.data是否为blob流的的形式，如果不是 看我下面讲解
const blob = new Blob([res], {type: “application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8”});
const elink = document.createElement(“a”);
elink.download = 巡检任务.xlsx;
elink.href = URL.createObjectURL(blob);
document.body.appendChild(elink);
elink.click();
URL.revokeObjectURL(elink.href); // 释放URL 对象
document.body.removeChild(elink);
});
}
2.具体封装的代码

request.js 代码如下
import axios from ‘axios’
// http method
const METHOD = {
GET: ‘get’,
POST: ‘post’,
EXPORT: ‘export’
}

/**

• axios请求
• @param url 请求地址
• @param method {METHOD} http method
• @param params 请求参数
• @returns {Promise<AxiosResponse>}
  */
  async function request(url, method, params, config={}) {
  const BASE_URL = process.env.VUE_APP_API_BASE_URL
  let uri = ‘’
  if (url.startsWith(‘https://’) || url.startsWith(‘http://’)) {
  uri = url
  } else {
  uri = ${BASE_URL}/${url}
  }
  const promise = new Promise((resolve, reject) => {
  if (method === METHOD.GET) {
  axios.get(uri, {params, …config}).then(res => {
  if (res.status === 200) {
  resolve(res.data)
  } else {
  reject(res)
  }
  });
  }else if (method === METHOD.POST) {
  axios.post(uri, params, config).then(res => {
  if (res.status === 200) {
  resolve(res.data)
  } else {
  reject(res)
  }
  });
  }
  // 导出的时候以流的形式返回 ，所以加上 responseType: ‘blob’,
  else if (method === METHOD.EXPORT) {
  axios.post(uri, params, {
  responseType: ‘blob’,
  }).then(res => {
  if (res.status === 200) {
  resolve(res.data)
  } else {
  reject(res)
  }
  });
  }
  })
  return promise;
  }

export {
request

}

遇到的坑

看一下后端返回的数据 是否是以 Blob的形式返回的 上图data就是要导出的流的数据
后端接口返回的流的形式大概就是如下图

// 导出
exportList() {
const param={
pageSize:10,
pageNum:this.current
}
this.$request(api/xjTask/export, ‘export’, param,).then((res) => {
console.log(res）//在这里打印一下数据 看res.data是否为blob流的的形式，如果不是 看我下面讲解
const blob = new Blob([res], {type: “application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8”});
const elink = document.createElement(“a”);
elink.download = 巡检任务.xlsx;
elink.href = URL.createObjectURL(blob);
document.body.appendChild(elink);
elink.click();
URL.revokeObjectURL(elink.href); // 释放URL 对象
document.body.removeChild(elink);
});
}

如果返回的是字符转 就有问题了 导出的文件会打不开，此时你就需要检查下你项目中是否用到了mock模块，如果用了的话，就需要在node-modules 去修改mock.js 的源码

改下源码

dist/mock.js
大约在 8683 行
加一行代码

this.custom.xhr.responseType = this.responseType

希望能帮大家解决坑