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

1.安装ElementUI模块

cnpm install element-ui -S

2.在main.js中引入

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

3.全局安装

Vue.use(ElementUI)

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

vue + element-ui导入导出功能

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

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

  :action="importUrl"//上传的路径
  :name ="name"//上传的文件字段名
  :headers="importHeaders"//请求头格式
  :on-preview="handlePreview"//可以通过 file.response 拿到服务端返回数据
  :on-remove="handleRemove"//文件移除
  :before-upload="beforeUpload"//上传前配置
  :on-error="uploadFail"//上传错误
  :on-success="uploadSuccess"//上传成功
  :file-list="fileList"//上传的文件列表
  :with-credentials="withCredentials">//是否支持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()
  })
 }

 

转载于:https://www.cnblogs.com/amujoe/p/8891257.html