怎么在vue中利用post方法下载excel文件-创新互联
怎么在vue中利用post方法下载excel文件?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。
创新互联公司主营鲅鱼圈网站建设的网络公司,主营网站建设方案,重庆APP开发,鲅鱼圈h5成都微信小程序搭建,鲅鱼圈网站营销推广欢迎鲅鱼圈等地区企业咨询为什么要使用Vue
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文件的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注创新互联成都网站设计公司行业资讯频道,感谢各位的阅读!
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
分享标题:怎么在vue中利用post方法下载excel文件-创新互联
文章链接:http://myzitong.com/article/cdojge.html