实现效果
导出后的效果：
步骤
第一步：安装依赖
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) => { })
