vue+element-ui怎么实现导入导出功能

这篇文章主要介绍了vue+element-ui怎么实现导入导出功能的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇vue+element-ui怎么实现导入导出功能文章都会有所收获，下面我们一起来看看吧。

安装ElementUI模块

cnpm install element-ui -S

在main.js中引入

import ElementUI from 'element-ui'import 'element-ui/lib/theme-default/index.css'

全局安装

Vue.use(ElementUI)

当我们安装完记得重新运行，cnpm run dev ，现在就可以直接使用elementUI了。

vue + element-ui导入导出功能

1.前段后台管理系统中数据展示一般都是用表格,表格会涉及到导入和导出;

2.导入是利用element-ui的Upload 上传组件;

//是否支持cookie信息发送

3.导出是利用file的一个对象blob;通过调用后台接口拿到数据,然后用数据来实例化blob,利用a标签的href属性链接到blob对象

 export const downloadTemplate = function (scheduleType) {  axios.get('/rest/schedule/template', {   params: {    "scheduleType": scheduleType   },   responseType: 'arraybuffer'  }).then((response) => {   //创建一个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文件,调用接口

import axios from 'axios'// 下载模板 export const downloadTemplate = function (scheduleType) {  axios.get('/rest/schedule/template', {   params: {    "scheduleType": scheduleType   },   responseType: 'arraybuffer'  }).then((response) => {   //创建一个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()  }) }

关于"vue+element-ui怎么实现导入导出功能"这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对"vue+element-ui怎么实现导入导出功能"知识都有一定的了解，大家如果还想学习更多知识，欢迎关注行业资讯频道。