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


Posted in Javascript onDecember 22, 2017

前言

众所周知,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 上传组件;

<el-upload class="upload-demo"
  :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信息发送
</el-upload>

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

<template>
<div>
 <el-table
 ref="multipleTable"
 :data="tableData3"
 tooltip-effect="dark"
 border
 style="width: 80%"
 @selection-change="handleSelectionChange">
 <el-table-column
  type="selection"
  width="55">
 </el-table-column>
 <el-table-column
  label="日期"
  width="120">
  <template slot-scope="scope">{{ scope.row.date }}</template>
 </el-table-column>
 <el-table-column
  prop="name"
  label="姓名"
  width="120">
 </el-table-column>
 <el-table-column
  prop="address"
  label="地址"
  show-overflow-tooltip>
 </el-table-column>
 </el-table>
 <div style="margin-top: 20px">
 <el-button @click="toggleSelection([tableData3[1], tableData3[2]])">切换第二、第三行的选中状态</el-button>
 <el-button @click="toggleSelection()">取消选择</el-button>
 <el-button type="primary" @click="importData">导入</el-button>
 <el-button type="primary" @click="outportData">导出</el-button>
 </div>
 <!-- 导入 -->
 <el-dialog title="导入" :visible.sync="dialogImportVisible" :modal-append-to-body="false" :close-on-click-modal="false" class="dialog-import">
  <div :class="{'import-content': importFlag === 1, 'hide-dialog': importFlag !== 1}">
  <el-upload class="upload-demo"
  :action="importUrl"
  :name ="name"
  :headers="importHeaders"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :before-upload="beforeUpload"
  :on-error="uploadFail"
  :on-success="uploadSuccess"
  :file-list="fileList"
  :with-credentials="withCredentials">
  <!-- 是否支持发送cookie信息 -->
   <el-button size="small" type="primary" :disabled="processing">{{uploadTip}}</el-button>
   <div slot="tip" class="el-upload__tip">只能上传excel文件</div>
  </el-upload>
  <div class="download-template">
   <a class="btn-download" @click="download">
   <i class="icon-download"></i>下载模板</a>
  </div>
  </div>
  <div :class="{'import-failure': importFlag === 2, 'hide-dialog': importFlag !== 2}" >
  <div class="failure-tips">
   <i class="el-icon-warning"></i>导入失败</div>
  <div class="failure-reason">
   <h4>失败原因</h4>
   <ul>
   <li v-for="(error,index) in errorResults" :key="index">第{{error.rowIdx + 1}}行,错误:{{error.column}},{{error.value}},{{error.errorInfo}}</li>
   </ul>
  </div>
  </div>
 </el-dialog>

 <!-- 导出 -->
</div>
</template>
<script>
import * as scheduleApi from '@/api/schedule'
export default {
 data() {
 return {
  tableData3: [
  {
   date: "2016-05-03",
   name: "王小虎",
   address: "上海市普陀区金沙江路 1518 弄"
  },
  {
   date: "2016-05-02",
   name: "王小虎",
   address: "上海市普陀区金沙江路 1518 弄"
  },
  {
   date: "2016-05-04",
   name: "王小虎",
   address: "上海市普陀区金沙江路 1518 弄"
  },
  {
   date: "2016-05-01",
   name: "王小虎",
   address: "上海市普陀区金沙江路 1518 弄"
  },
  {
   date: "2016-05-08",
   name: "王小虎",
   address: "上海市普陀区金沙江路 1518 弄"
  },
  {
   date: "2016-05-06",
   name: "王小虎",
   address: "上海市普陀区金沙江路 1518 弄"
  },
  {
   date: "2016-05-07",
   name: "王小虎",
   address: "上海市普陀区金沙江路 1518 弄"
  }
  ],
  multipleSelection: [],
  importUrl:'www.baidu.com',//后台接口config.admin_url+'rest/schedule/import/'
  importHeaders:{
  enctype:'multipart/form-data',
  cityCode:''
  },
  name: 'import',
  fileList: [],
  withCredentials: true,
  processing: false,
  uploadTip:'点击上传',
  importFlag:1,
  dialogImportVisible:false,
  errorResults:[]
 };
 },
 methods: {
 toggleSelection(rows) {
  if (rows) {
  rows.forEach(row => {
   this.$refs.multipleTable.toggleRowSelection(row);
  });
  } else {
  this.$refs.multipleTable.clearSelection();
  }
 },
 handleSelectionChange(val) {
  //复选框选择回填函数,val返回一整行的数据
  this.multipleSelection = val;
 },
 importData() {
  this.importFlag = 1
  this.fileList = []
  this.uploadTip = '点击上传'
  this.processing = false
  this.dialogImportVisible = true
 },
 outportData() {
  scheduleApi.downloadTemplate()
 },
 handlePreview(file) {
  //可以通过 file.response 拿到服务端返回数据
 },
 handleRemove(file, fileList) {
  //文件移除
 },
 beforeUpload(file){
  //上传前配置
  this.importHeaders.cityCode='上海'//可以配置请求头
  let excelfileExtend = ".xls,.xlsx"//设置文件格式
  let fileExtend = file.name.substring(file.name.lastIndexOf('.')).toLowerCase();
  if (excelfileExtend.indexOf(fileExtend) <= -1) {
   this.$message.error('文件格式错误')
   return false
  }
  this.uploadTip = '正在处理中...'
  this.processing = true
 },
 //上传错误
 uploadFail(err, file, fileList) {
  this.uploadTip = '点击上传'
  this.processing = false
  this.$message.error(err)
 },
 //上传成功
 uploadSuccess(response, file, fileList) {
  this.uploadTip = '点击上传'
  this.processing = false
  if (response.status === -1) {
  this.errorResults = response.data
  if (this.errorResults) {
   this.importFlag = 2
  } else {
   this.dialogImportVisible = false
   this.$message.error(response.errorMsg)
  }
  } else {
  this.importFlag = 3
  this.dialogImportVisible = false
  this.$message.info('导入成功')
  this.doSearch()
  }
 },
 //下载模板
 download() {
  //调用后台模板方法,和导出类似
  scheduleApi.downloadTemplate()
 },
 }
};
</script>
<style scoped>
.hide-dialog{
 display:none;
}
</style>

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

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
Cookie 注入是怎样产生的
Apr 08 Javascript
javascript dom 基本操作小结
Apr 11 Javascript
jquery验证表单中的单选与多选实例
Aug 18 Javascript
js设置cookie过期及清除浏览器对应名称的cookie
Oct 24 Javascript
js中的内部属性与delete操作符介绍
Aug 10 Javascript
angularjs 源码解析之scope
Aug 22 Javascript
JS基于onclick事件实现单个按钮的编辑与保存功能示例
Feb 13 Javascript
基于axios封装fetch方法及调用实例
Feb 05 Javascript
Vue使用mixins实现压缩图片代码
Mar 14 Javascript
p5.js入门教程之图片加载
Mar 20 Javascript
详解关于webpack多入口热加载很慢的原因
Apr 24 Javascript
layui当点击文本框时弹出选择框,显示选择内容的例子
Sep 02 Javascript
jackson解析json字符串,首字母大写会自动转为小写的方法
Dec 22 #Javascript
js读取本地文件的实例
Dec 22 #Javascript
javascript将json格式数组下载为excel表格的方法
Dec 22 #Javascript
原生js实现移动端触摸轮播的示例代码
Dec 22 #Javascript
JavaScript多线程运行库Nexus.js详解
Dec 22 #Javascript
JS实现在文本指定位置插入内容的简单示例
Dec 22 #Javascript
JavaScript实现单例模式实例分享
Dec 22 #Javascript
You might like
高亮度显示php源代码
2006/10/09 PHP
一个严格的PHP Session会话超时时间设置方法
2014/06/10 PHP
Mac版PhpStorm之XAMPP整合apache服务器配置的图文教程详解
2016/10/13 PHP
PHP使用ajax的post方式下载excel文件简单示例
2019/08/06 PHP
javascript实现跳转菜单的具体方法
2013/07/05 Javascript
基于jquery实现的文字淡入淡出效果
2013/11/14 Javascript
jquery预览图片实现鼠标放上去显示实际大小
2014/01/16 Javascript
Chrome下ifame父窗口调用子窗口的问题示例探讨
2014/03/17 Javascript
node.js中RPC(远程过程调用)的实现原理介绍
2014/12/05 Javascript
jQuery中hover方法和toggle方法使用指南
2015/02/27 Javascript
jsonp跨域请求数据实现手机号码查询实例分析
2015/12/12 Javascript
jQuery中通过ajax调用webservice传递数组参数的问题实例详解
2016/05/20 Javascript
jQuery特殊符号转义的实现
2016/11/30 Javascript
JS+HTML5 FileReader实现文件上传前本地预览功能
2020/03/27 Javascript
vue2.0之多页面的开发的示例
2018/01/30 Javascript
vue2.0 自定义组件的方法(vue组件的封装)
2018/06/05 Javascript
Vue中通过Vue.extend动态创建实例的方法
2019/08/13 Javascript
vue 导航内容设置选中状态样式的例子
2019/11/01 Javascript
js实现时分秒倒计时
2019/12/03 Javascript
JavaScript实现跟随鼠标移动的盒子
2021/01/28 Javascript
Python开发的HTTP库requests详解
2017/08/29 Python
磁盘垃圾文件清理器python代码实现
2020/08/24 Python
Python中利用LSTM模型进行时间序列预测分析的实现
2019/07/26 Python
python中字典按键或键值排序的实现代码
2019/08/27 Python
python中class的定义及使用教程
2019/09/18 Python
在 Python 中使用 7zip 备份文件的操作
2020/12/11 Python
Python字符串对齐、删除字符串不需要的内容以及格式化打印字符
2021/01/23 Python
css3 响应式媒体查询的示例代码
2019/09/25 HTML / CSS
UGG澳洲官网:UGG Australia
2018/04/26 全球购物
应聘编辑职位自荐信范文
2014/01/05 职场文书
幼儿园美术教学反思
2014/01/31 职场文书
厂长岗位职责
2014/02/19 职场文书
感恩教师节演讲稿
2014/09/03 职场文书
学习十八大演讲稿
2014/09/15 职场文书
社区文明创建工作总结2015
2015/04/21 职场文书
病假证明模板
2015/06/19 职场文书