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

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

创新互联公司是专业的成安网站建设公司，成安接单;提供网站设计、成都网站制作,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行成安网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

安装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文件)

 
 
 
 
 
 
 
 切换第二、第三行的选中状态
 取消选择
 导入
 导出