怎么在vue中利用post方法下载excel文件?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。
创新互联建站从2013年成立,是专业互联网技术服务公司,拥有项目成都做网站、网站建设网站策划,项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命,1280元梁园做网站,已为上家服务,为梁园各地企业和个人服务,联系电话:18980820575
Vue是一款友好的、多用途且高性能的JavaScript框架,使用vue可以创建可维护性和可测试性更强的代码库,Vue允许可以将一个网页分割成可复用的组件,每个组件都包含属于自己的HTML、CSS、JavaScript,以用来渲染网页中相应的地方,所以越来越多的前端开发者使用vue。
后台方法的参数必须是@RequestBody修饰的。
前台关键代码:
axios ( { method : 'post', url : api.exportPlayTime , // 请求地址 data : { choose : type, begindate : startDate, enddate : endDate }, responseType : 'arraybuffer', observe: 'response', } ) .then ( ( res ) => { const fileName = ""+filename+".xlsx" let blob = new Blob([res.data], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"}); if ( 'download' in document.createElement ( 'a' ) ) { // 非IE下载 const elink = document.createElement ( 'a' ) elink.download = fileName elink.style.display = 'none' elink.href = URL.createObjectURL ( blob ) document.body.appendChild ( elink ) elink.click () URL.revokeObjectURL ( elink.href ) // 释放URL 对象 document.body.removeChild ( elink ) } else { // IE10+下载 navigator.msSaveBlob ( blob, fileName ) } })
download(data) { if (!data) { return } let url = window.URL.createObjectURL(new Blob([data])) let link = document.createElement('a') link.style.display = 'none' link.href = url link.setAttribute('download', 'excel.xlsx') document.body.appendChild(link) link.click() },
看完上述内容,你们掌握怎么在vue中利用post方法下载excel文件的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注创新互联行业资讯频道,感谢各位的阅读!