Vue实现导出excel表格功能


Posted in Javascript onMarch 30, 2018

引言:

最近使用vue在做一个后台系统,技术栈 vue + iView ,在页面中生成表格后, iView可以实现表格的导出,不过只能导出csv格式的,并不适合项目需求。

如果想要导出Excel

  • 在src目录下创建一个文件(vendor)进入 Blob.js 和 Export2Excel.js
  • npm install -S file-saver 用来生成文件的web应用程序
  • npm install -S xlsx 电子表格格式的解析器
  • npm install -D script-loader 将js挂在在全局下

表结构

渲染页面中的表结构是由 columns 列 和 tableData 行,来渲染的 columns 为表头数据 tableData 为表实体内容

columns1: [
   {
   title: '序号',
   key: 'serNum'
   },
   {
   title: '选择',
   key: 'choose',
   align: 'center',
   render: (h, params) => {
    if (params.row.status !== '1' && params.row.status !== '2') {
    return h('div', [
     h('checkbox', {
     props: {
      type: 'selection'
     },
     on: {
      'input': (val) => {
      console.log(val)
      }
     }
     })
    ])
    } else {
    return h('span', {
     style: {
     color: '#587dde',
     cursor: 'pointer'
     },
     on: {
     click: () => {
      // this.$router.push({name: '', query: { id: params.row.id }})
     }
     }
    }, '查看订单')
    }
   }
   },
   ...
  ],

tableData 就不写了,具体数据结构查看iViewAPI

在build 目录下 webpack.base.conf.js 配置 我们要加载时的路径

alias: {
  'src': path.resolve(__dirname, '../src'),
 }

在当前页面中引入依赖

require('script-loader!file-saver')
 // 转二进制用
 require('script-loader!src/vendor/Blob')
 // xlsx核心
 require('script-loader!xlsx/dist/xlsx.core.min')

当我们要导出表格执行 @click 事件调用 handleDownload 函数

handleDownload() {
  this.downloadLoading = true
  require.ensure([], () => {
   const {export_json_to_excel} = require('src/vendor/Export2Excel')
   const tHeader = Util.cutValue(this.columns1, 'title')
   const filterVal = Util.cutValue(this.columns1, 'key')
   const list = this.tableData1
   const data = this.formatJson(filterVal, list)
   export_json_to_excel(tHeader, data, '列表excel')
   this.downloadLoading = false
  })
  },
  formatJson(filterVal, jsonData) {
  return jsonData.map(v => filterVal.map(j => v[j]))
  }

Util.cutValue 是公共方法,目的是为了将,tHeader 和filterVal 的值转成数组从而生成表格

### Util module
// 截取value值
utils.cutValue = function (target, name) {
 let arr = []
 for (let i = 0; i < target.length; i++) {
 arr.push(target[i][name])
 }
 return arr
}

Export2Excel.js/Blob.js 的代码

下面再看下vue中excel表格的导入和导出

注意:vue中要实现表格的导入与导出,首先要install两个依赖,

npm install -S file-saver xlsx  和  npm install -D script-loader。其次,在项目src目录下新建一个文件夹vendor(名字随意),在此文件夹下放置两个文件Blob.js和Export2Excal.js(下载地址:http://files.cnblogs.com/files/wangyunhui/vendor.rar)。之后就可以愉快的导入导出了微笑。

1、导入

1.<input id="upload" type="file" @change="importfxx(this)" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" /> 

importfxx(obj) { 
let _this = this; 
console.log("xxxxxxxxxxxxxxxxxxxxxxxxxxx1"); 
let inputDOM = this.$refs.inputer; 
// 通过DOM取文件数据 
this.file = event.currentTarget.files[0]; 
var rABS = false; //是否将文件读取为二进制字符串 
var f = this.file; 
var reader = new FileReader(); 
//if (!FileReader.prototype.readAsBinaryString) { 
FileReader.prototype.readAsBinaryString = function(f) { 
var binary = ""; 
var rABS = false; //是否将文件读取为二进制字符串 
var pt = this; 
var wb; //读取完成的数据 
var outdata; 
var reader = new FileReader(); 
reader.onload = function(e) { 
var bytes = new Uint8Array(reader.result); 
var length = bytes.byteLength; 
for(var i = 0; i < length; i++) { 
binary += String.fromCharCode(bytes[i]); 
} 
var XLSX = require('xlsx'); 
if(rABS) { 
wb = XLSX.read(btoa(fixdata(binary)), { //手动转化 
type: 'base64' 
}); 
} else { 
wb = XLSX.read(binary, { 
type: 'binary' 
}); 
} 
outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);//outdata就是你想要的东西 
} 
reader.readAsArrayBuffer(f); 
} 
if(rABS) { 
reader.readAsArrayBuffer(f); 
} else { 
reader.readAsBinaryString(f); 
} 
}

2.导出

inportexcel: function() { //兼容ie10哦! 
require.ensure([], () => {


 
const { export_json_to_excel } = require('../../vendor/Export2Excel');
//引入文件


 
const tHeader = ['用户名', '姓名', '部门', '职位', '邮箱', '充值']; //将对应的属性名转换成中文 
// const tHeader = []; 




 
const filterVal = ['userName', 'realName', 'department', 'position', 'email', 'money'];//table表格中对应的属性名

  
  
const list = this.sels;



 
const data = this.formatJson(filterVal, list);



 
export_json_to_excel(tHeader, data, '列表excel');


 
}) 
}

总结

以上所述是小编给大家介绍的Vue实现导出excel表格功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
在网页中屏蔽快捷键
Sep 06 Javascript
JQuery开发的数独游戏代码
Oct 29 Javascript
一个JavaScript去除字符串末尾的空白实例代码
Sep 22 Javascript
jQuery实现首页顶部可伸缩广告特效代码
Apr 15 Javascript
浅谈JS正则表达式的RegExp对象和括号的使用
Jul 28 Javascript
Jquery删除css属性的简单方法
Dec 04 Javascript
jQuery中map函数的两种方式
Apr 07 jQuery
微信小程序商城项目之侧栏分类效果(1)
Apr 17 Javascript
jQuery接受后台传递的List的实例详解
Aug 02 jQuery
关于angularJs清除浏览器缓存的方法
Nov 28 Javascript
实例分析JS与Node.js中的事件循环
Dec 12 Javascript
js实现点击按钮复制文本功能
Jul 20 Javascript
理解 JavaScript EventEmitter
Mar 29 #Javascript
JavaScript EventEmitter 背后的秘密 完整版
Mar 29 #Javascript
vue的diff算法知识点总结
Mar 29 #Javascript
vue文件树组件使用详解
Mar 29 #Javascript
vue全局组件与局部组件使用方法详解
Mar 29 #Javascript
javascript实现文件拖拽事件
Mar 29 #Javascript
vue 父组件调用子组件方法及事件
Mar 29 #Javascript
You might like
轻松入门: 煮好咖啡的七个诀窍
2021/03/03 冲泡冲煮
实用函数2
2007/11/08 PHP
Yii2超好用的日期和时间组件(值得收藏)
2016/05/05 PHP
Laravel使用原生sql语句并调用的方法
2019/10/09 PHP
textarea的value是html文件源代码,存成html文件的代码
2007/04/20 Javascript
为JS扩展Array.prototype.indexOf引发的问题探讨及解决
2013/04/24 Javascript
javascript强大的日期函数代码分享
2013/09/04 Javascript
制作jquery遮罩层效果导航菜单代码分享
2013/12/25 Javascript
JavaScript使用cookie记录临时访客信息的方法
2015/04/07 Javascript
javascript实现无法关闭的弹框
2016/11/27 Javascript
Javascript获取某个月的天数
2018/05/30 Javascript
vue实现图片预览组件封装与使用
2019/07/13 Javascript
详解elementui之el-image-viewer(图片查看器)
2019/08/30 Javascript
浅析webpack-bundle-analyzer在vue-cli3中的使用
2019/10/23 Javascript
在Python中调用ggplot的三种方法
2015/04/08 Python
python妹子图简单爬虫实例
2015/07/07 Python
Python常见字符串操作函数小结【split()、join()、strip()】
2018/02/02 Python
python图书管理系统
2020/04/05 Python
Python使用tkinter库实现文本显示用户输入功能示例
2018/05/30 Python
django项目环境搭建及在虚拟机本地创建django项目的教程
2019/08/02 Python
python使用 __init__初始化操作简单示例
2019/09/26 Python
安装PyInstaller失败问题解决
2019/12/14 Python
python随机生成大小写字母数字混合密码(仅20行代码)
2020/02/01 Python
HTML页面中添加Canvas标签示例
2015/01/01 HTML / CSS
HTML5中使用postMessage实现两个网页间传递数据
2016/06/22 HTML / CSS
新闻网站实习自我鉴定
2013/09/25 职场文书
酒吧创业计划书
2014/01/18 职场文书
小学数学教学反思
2014/02/02 职场文书
中学生演讲稿
2014/04/26 职场文书
酒店端午节活动方案
2014/08/26 职场文书
对学校的意见和建议
2015/06/04 职场文书
致运动员加油稿
2015/07/21 职场文书
2015年度学校应急管理工作总结
2015/10/22 职场文书
《平行四边形的面积》教学反思
2016/02/16 职场文书
vue实现可拖拽的dialog弹框
2021/05/13 Vue.js
Python序列化模块JSON与Pickle
2022/06/05 Python