vue + element-ui实现简洁的导入导出功能
发布时间：2020-12-17 02:39:52 所属栏目：百科 来源：网络整理
导读：前言 众所周知，ElementUI,是一个比较完善的UI库，但是使用它需要有一点vue的基
前言众所周知，ElementUI,是一个比较完善的UI库，但是使用它需要有一点vue的基础。在开始本文的正文之前，我们先来看看安装的方法吧。 安装ElementUI模块在main.js中引入 全局安装 当我们安装完记得重新运行， vue + element-ui导入导出功能1.前段后台管理系统中数据展示一般都是用表格,表格会涉及到导入和导出; 2.导入是利用element-ui的Upload 上传组件; 3.导出是利用file的一个对象blob;通过调用后台接口拿到数据,然后用数据来实例化blob,利用a标签的href属性链接到blob对象 {
//创建一个blob对象,file的一种
let blob = new Blob([response.data],{ type: 'application/x-xls' })
let link = document.createElement('a')
link.href = window.URL.createObjectURL(blob)
//配置下载的文件名
link.download = fileNames[scheduleType] + '_' + response.headers.datestr + '.xls'
link.click()
})
}
4.贴上整个小demo的完整代码,在后台开发可以直接拿过去用(vue文件) 导入失败
失败原因
5.js文件,调用接口 总结以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对编程之家的支持。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |