第一步:在utils中新建一个.js文件,文件内容如下:
如果没有需要npm i 一下哦,或者yarn,cnpm...
import { saveAs } from 'file-saver'
export const downloadFile = (fileStream, saveFileName) => {
return new Promise((resolve, reject) => {
const blob = new Blob([fileStream])
if (navigator.msSaveBlob) { // 兼容IE
navigator.msSaveBlob(blob, saveFileName)
} else {
const url = window.URL.createObjectURL(blob)
saveAs(url, saveFileName)
}
resolve()
})
}
我的文件名叫这个
接口里面要加特殊的东西:
//导出会员表格
export function exportExcel(data) {
return request({
url: 'xxxxx,
method: 'post',
responseType: 'blob', //这里是重点
data:data
})
}
然后再需要导出的文件内导入这个方法:
import {downloadFile} from '../../utils/exportExcel'
在点击按钮绑定事件后--
//导出会员
exportExcel(){
console.log(132);
exportExcel().then(res =>{
console.log(res);
downloadFile(res,'会员收入.xls')
}).catch(err =>{
console.log(err);
})
},
downloadFile()
这里面接收两个参数,第一个参数是res(接口返回的内容),第二个参数是文件名
注意:文件名的后缀一定是.xls