您好,登录后才能下订单哦!
这篇文章主要讲解了“vue中如何使用post进行excel表下载”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“vue中如何使用post进行excel表下载”吧!
<!-- 导出提示框 --> <Modal title="导出" :show.sync="exportVisible" :showfooter="false" @close="closeExportFiles" > <exportFiles ref="exportFilesDom" :model="exportForm" export-url="导出链接" /> </Modal>
这次因为导出的excel文件表头有点复杂,后端弄了很久并且是个post请求,我就自己也重新写的
后端发来的下载的话是文件流,获取到的数据是乱码,需要转blob然后进行下载,下载的话就是使用普遍的在网页上创建一个 a 链接,然后挂载上 a 链接这样的方法,点击下载
将请求方法封装了一下,因为以前的方法都在判断响应的 code 等于200,我前期做的时候请求一直再走 catch 里面,我萌了很久,我太菜了,最后发现返回的是乱码,没有返回code什么的,所以在axios的响应函数里面一直在走 Promise.reject(),就走catch里面,所以封装了下面的方法
// 文件下载导出 http.exportExcel = (url,data,config) => { return instance.post(url,data,config).then(res => { return res }) }
url:请求地址
data:请求参数 3.config:请求时转为blob,所以需要设置 responseType:'blob'
主要代码解释都放在下面的注释中了,就不再重新解释了,主要是设置请求头中的 responseType:'blob'
async reportExport(type){ // console.log(this.multipleSelection) this.type = type if(type === 2 ){ if(this.multipleSelection.length<=0){ return this.$message.error('请先选择要导出的数据') } } let ids = [] for(let obj of this.multipleSelection){ ids.push(obj.id) } let form1 = { type:type, ids:ids, date:this.dayTime, } let infoMessage = this.$message.info('请稍后正在导出中') // 这个是拿到element中this.$message的实力对象,后面调用close关闭 try { // responseType:'blob' 重点,设置将后端传回的数据进行blob转化,不然乱码 const data = await this.$http.exportExcel('请求的url',form1,{responseType:'blob'}) this.download(data) // 导出excel,这个方法下面会有解释 infoMessage.close() // 关闭上方的提示信息,不然两个提示信息会同时出现 this.$message.success('导出成功') } catch (error) { console.log(error) } },
// 下载文件 download (data) { if (!data) { return } window.URL = window.URL || window.webkitURL // 兼容性 // 创建一个 URL 这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。 let url = window.URL.createObjectURL(new Blob([data])) let link = document.createElement('a') // 创建一个a元素 link.style.display = 'none' // 让a元素在页面中隐藏 link.href = url // 绑定 a 元素的 href 为当前的url let exportName = this.type == 1 ? this.dayTime : this.belongMonth link.setAttribute('download', `${exportName}.xlsx`) // 设置 a 元素 download属性,属性名为后面的值 document.body.appendChild(link) // 添加到页面中 link.click() // 点击a元素 下载excel文件 window.URL.revokeObjectURL(url) //卸载url,释放内存 },
1.window.webkitURL是[webkit]内核的实现(一般手机上就是使用这个),window.webkitURL和window.URL是一样的,window.URL是标准定义,所以做一个兼容
2.标签变量名.setAttribute("属性名","属性值")
感谢各位的阅读,以上就是“vue中如何使用post进行excel表下载”的内容了,经过本文的学习后,相信大家对vue中如何使用post进行excel表下载这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是亿速云,小编将为大家推送更多相关知识点的文章,欢迎关注!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。