前端导出excel 接口处理和导出处理

鸡汤辉

已于 2024-04-17 21:36:25 修改

阅读量314

点赞数 4

文章标签：前端

于 2024-04-15 17:03:11 首次发布

本文链接：https://blog.csdn.net/c327127960/article/details/137786289

版权

如果按照一般的请求方式，接口会返回如下乱码
在这里插入图片描述
此时，接口其实已经请求成功了，只需要对乱码进行一下处理就行

1.请求方式处理

1.1 如果是直接使用axios进行请求

axios({
	method: 'get',
	url: url,
	params: params,
	//需要添加
	responseType: 'blob'
})
//或者
axios.get(url, {
	params: params,
	//需要添加
	responseType: 'blob'
})

1.2 如果是框架封装好的接口，需要找到request.js 文件

//request.js
const service = axios.create({
	baseURL: '/api', // api base_url
	timeout: sysConfig.TIMEOUT // 请求超时时间
})

//这是我这个框架自带的封装好的方法 options 可以提供扩展的属性 所以直接使用时添加 responseType: 'blob' 即可
export const baseRequest = (url, value = {}, method = 'post', options = {}) => {
	if (method === 'get') {
		return service.get(url, {
			params: value,
			...options
		})
	}
}

//api.js
exportHistory(data) {
	return request('history/export', data, 'get', {responseType: 'blob'})
}

2. 处理接口内容

此时接口返回的内容打印出来应该是这样

在这里插入图片描述
我们需要其中的data

使用这个方法即可先获取接口返回值，取到返回值中的data

const getExportData = async () => {
  // 请求导出接口 获取到后端返回的数据
  let blobData = await exportData(params);  
  let content = blobData.data;  //这一步要注意，看你接口返回的数据结构 取到data即可
  let data = new Blob([content], {
    type: "application/vnd.ms-excel;charset=utf-8"
  });
  let downloadUrl = window.URL.createObjectURL(data);
  let anchor = document.createElement("a");
  anchor.href = downloadUrl;
  anchor.download = "name.xlsx"; // 表格名称.文件类型
  anchor.click();
  window.URL.revokeObjectURL(anchor);  // 消除请求接口返回的数据
};