将方法封装成公用的方法,自己放在自己的公用方法文件里,然后直接调用即可
// post 方法导出文件
const postExport = (data, name) => {
// data要导出的内容,name是文件名,固定可以自己在这里定义好
const csvData = new Blob([data], { type: 'application/x-xlsx' })
const file_name = name + '.xlsx'
// ie浏览器
if (window.navigator && window.navigator.msSaveOrOpenBlob) {
window.navigator.msSaveOrOpenBlob(csvData, file_name)
} else { // 非ie浏览器
var a = document.createElement('a')
var url = window.URL.createObjectURL(csvData)
a.href = url
a.download = file_name
a.click()
a.remove()
window.URL.revokeObjectURL(url)
}
}
export default {
postExport
}
用的axios进行请求,也是封装成公用的方法
记得设置: responseType: ‘blob’
export function postExport(url, data) {
return $http({
url: url,
method: 'post',
datatype: 'application/json',
responseType: 'blob',
params: { ...data },
})
}
调用:
// 用 postExport的请求方法,请求导出接口,带上要传的参数
let res = await this.$api.postExport('自己的导出的接口地址', '要传的参数')
if (!res) return
// 接口返回数据之后 调用前面封装导出的方法即可
this.$util.postExport(res, '学校列表')
get方法导出:
window.location.href = '自己的导出接口地址'
get方法导出,带参数:
// this.choseTableData 要传递的参数
window.location.href = '自己的导出接口地址' + '?ids=' + this.choseTableData