实现效果
导出后的效果:
步骤
第一步:安装依赖
npm install --save xlsx file-saver
第二步:引入依赖
// 引入导出Excel表格依赖
import * as FileSaver from "file-saver";
import * as XLSX from "xlsx";
第三步:导出
// 导出事件
const exportClick = () => {
axios({
method: 'post',
url: '/pcapi/Redeem/derive',
data: qs.stringify({}),
})
.then((res) => {
console.log(res.data)
const data = new Blob([res.data], {
type: 'application/vnd.ms-excel;charset=utf-8',
})
const downloadUrl = window.URL.createObjectURL(data)
const anchor = document.createElement('a')
anchor.href = downloadUrl
anchor.download = '表格名称.xlsx' // 表格名称.文件类型
anchor.click()
window.URL.revokeObjectURL(res.data) // 消除请求接口返回的list数据
})
.catch((err) => {
console.log(err)
})
}
接口返回数据导出,通常需要请求后端接口获取数据,接口返回的数据基本上是乱码的,需要先处理乱码的数据,否则导出来的文件是损坏的,如下
看到这种返回信息,表格数据基本上是已经拿到了,现在只需要做一下数据的处理即可导出表格。
解决方法步骤拆解:解码
在请求接口的位置添加 { responseType: 'blob' }
将信息转码
axios({
method: 'post',
url: '/pcapi/Redeem/derive',
data: qs.stringify({}),
responseType: 'blob', // 添加 blob 解决乱码问题,或者 arraybuffer
})
.then((res) => {
})
.catch((err) => {
})