vue-实现文件下载
1.利用浏览器的导出功能window.location.href = 服务器文件路径相当于后端告诉前端文件的地址,直接使用浏览器去下载2.以流的形式下载文件查了一些资料,主要用的代码如下,原文章:入口在此基础上增加了params,以传参// 下载模板handleExportTem () {this.btnSendTem = true...
·
1.利用浏览器的导出功能
window.location.href = 服务器文件路径
相当于后端告诉前端文件的地址,直接使用浏览器去下载
2.以流的形式下载文件
查了一些资料,主要用的代码如下,原文章:入口
在此基础上增加了params,以传参
// 下载模板
handleExportTem () {
this.btnSendTem = true
// 加载loading
this.loading = true
this.loadingText = '正在导出模板...'
this.$axios({
baseURL: './',
url: 'xx',
method: 'post',
responseType: 'blob', // 服务器返回的数据类型
params: { // 其他参数
excel: 'excel02'
},
data: {}
}).then((res) => {
// 关闭loading
this.loading = false
console.log(res)
// 此处有个坑。这里用content保存文件流,最初是content=res,但下载的test.xls里的内容如下图1,
// 检查了下才发现,后端对文件流做了一层封装,所以将content指向res.data即可
// 另外,流的转储属于浅拷贝,所以此处的content转储仅仅是便于理解,并没有实际作用=_=
const content = res.data
const blob = new Blob([content]) // 构造一个blob对象来处理数据
const fileName = 'monthAssess.xlsx' // 导出文件名
// 对于<a>标签,只有 Firefox 和 Chrome(内核) 支持 download 属性
// IE10以上支持blob但是依然不支持download
if ('download' in document.createElement('a')) { // 支持a标签download的浏览器
const link = document.createElement('a') // 创建a标签
link.download = fileName // a标签添加属性
link.style.display = 'none'
link.href = URL.createObjectURL(blob)
document.body.appendChild(link)
link.click() // 执行下载
URL.revokeObjectURL(link.href) // 释放url
document.body.removeChild(link) // 释放标签
} else { // 其他浏览器
navigator.msSaveBlob(blob, fileName)
}
this.btnSendTem = false
}).catch((error) => {
console.log(error)
// 关闭loading
this.loading = false
this.btnSendTem = false
})
},
更多推荐
已为社区贡献4条内容
所有评论(0)