重庆平台网站建设费用/win7系统优化工具
1.利用浏览器的导出功能
window.location.href = 服务器文件路径
相当于后端告诉前端文件的地址,直接使用浏览器去下载
2.以流的形式下载文件
查了一些资料,主要用的代码如下,原文章:入口
在此基础上增加了params,以传参
// 下载模板handleExportTem () {this.btnSendTem = true// 加载loadingthis.loading = truethis.loadingText = '正在导出模板...'this.$axios({baseURL: './',url: 'xx',method: 'post',responseType: 'blob', // 服务器返回的数据类型params: { // 其他参数excel: 'excel02'},data: {}}).then((res) => {// 关闭loadingthis.loading = falseconsole.log(res)// 此处有个坑。这里用content保存文件流,最初是content=res,但下载的test.xls里的内容如下图1,// 检查了下才发现,后端对文件流做了一层封装,所以将content指向res.data即可// 另外,流的转储属于浅拷贝,所以此处的content转储仅仅是便于理解,并没有实际作用=_=const content = res.dataconst blob = new Blob([content]) // 构造一个blob对象来处理数据const fileName = 'monthAssess.xlsx' // 导出文件名// 对于<a>标签,只有 Firefox 和 Chrome(内核) 支持 download 属性// IE10以上支持blob但是依然不支持downloadif ('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) // 释放urldocument.body.removeChild(link) // 释放标签} else { // 其他浏览器navigator.msSaveBlob(blob, fileName)}this.btnSendTem = false}).catch((error) => {console.log(error)// 关闭loadingthis.loading = falsethis.btnSendTem = false})},