点击导出按钮直接执行方法
1, 简易导出 适合导出类型少的
// 从本地拿 出地址 process.env.VUE_APP_BASE_API 拼接 接口以及需要的数据
var url = process.env.VUE_APP_BASE_API + '/roster/listRosterExport?status=' + this.status
// 用 window 下载导出
window.location.href = url
2 多筛选条件进行的数据 导出
// api中接口定义需要加个 responseType: 'blob',
export function rosterExport(params) {
return request({
url: '/roster/listContractMessageExport',
method: 'get',
responseType: 'blob',
params
})
}
// 定义后台需要的数据
var data = {
status: this.status
name:this.name,
sex:this.sex
}
rosterExport(data).then(res => {
this.exportData(res, '合同管理')
})
// 固定的下载方法 下载的是excel 文件
exportData(res, title) {
const link = document.createElement('a')
const blob = new Blob([res.data], { type: 'application/vnd.ms-excel' })
link.style.display = 'none'
link.href = URL.createObjectURL(blob)
link.setAttribute('download', title + '.xlsx')
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
},
- 下载word文件
exportData(res, title) {
const link = document.createElement('a')
const blob = new Blob([res.data])
link.style.display = 'none'
link.href = URL.createObjectURL(blob)
link.setAttribute('download', title + '.docx')
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
},
- request 里面的拦截相应 判断是否为文件流文件
// .ms-excel if (response.headers['content-type'] != null && response.headers['content-type'].indexOf('vnd') > 0) { return response }
// response interceptor 响应拦截
service.interceptors.response.use(
// 正常获取数据
response => {
// .ms-excel
if (response.headers['content-type'] != null && response.headers['content-type'].indexOf('vnd') > 0) {
return response
}
if (response.data && response.data.code === 200) {
return response.data
} else {
if (response.data.code > 200 && response.data.code < 300) {
return response.data
} else {
if (response.data.code === 401) {
// 如果为401 跳到单点登录
window.localStorage.clear()
removeToken('SSO-Token')
window.location.href = response.data.url
} else {
Message({ type: 'error', message: response.data.message })
}
return Promise.reject(response)
}
}
},
通过url下载文件 并修改名字为特定名字
<a @click="clickdowm(item.url,item.name)" class="file-text" :title="item.name">{{item.name}}</a>
clickdowm(url, name) {
var x = new XMLHttpRequest()
x.open('GET', url, true)
x.responseType = 'blob'
x.onload = function (e) {
var url = window.URL.createObjectURL(x.response)
var a = document.createElement('a')
a.href = url
a.download = name // 下载后的文件名
a.click()
}
x.send()
},