Step 1: Create a new .js file in utils, the contents of which are as follows:
If you don't need npm i, or 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()
})
}
My file is called this
Add something special to the interface:
//导出会员表格
export function exportExcel(data) {
return request({
url: 'xxxxx,
method: 'post',
responseType: 'blob', //这里是重点
data:data
})
}
Then import this method in the file that needs to be exported:
import {downloadFile} from '../../utils/exportExcel'
After clicking the button binding event --
//导出会员
exportExcel(){
console.log(132);
exportExcel().then(res =>{
console.log(res);
downloadFile(res,'会员收入.xls')
}).catch(err =>{
console.log(err);
})
},
downloadFile()
Two parameters are received here, the first parameter is res (the content returned by the interface), and the second parameter is the file name
Note: The suffix of the file name must be .xls