vue + element-ui实现简洁的导入导出功能

时间：2017-12-29 编辑：猪哥来源：一聚教程网

前言

众所周知，ElementUI,是一个比较完善的UI库，但是使用它需要有一点vue的基础。在开始本文的正文之前，我们先来看看安装的方法吧。

安装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()
  })
 }

上一个： jackson解析json字符串,首字母大写会自动转为小写的方法
下一个：详解Vue中localstorage和sessionstorage的使用

推荐专题

最新下载

热门教程

vue + element-ui实现简洁的导入导出功能

失败原因

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程