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 相关文章推荐
Javascript实现的分页函数
Dec 22 Javascript
JS面向对象、prototype、call()、apply()
May 14 Javascript
jQuery实战之品牌展示列表效果
Apr 10 Javascript
jquery选择器之属性过滤选择器详解
Jan 27 Javascript
对table和ul实现js分页示例分享
Feb 24 Javascript
基于jQuery实现网页进度显示插件
Mar 04 Javascript
jQuery获取标签文本内容和html内容的方法
Mar 27 Javascript
原生JavaScript实现异步多文件上传
Dec 02 Javascript
Angularjs+bootstrap+table多选(全选)支持单击行选中实现编辑、删除功能
Mar 27 Javascript
JavaWeb表单及时验证功能在输入后立即验证(含用户类型,性别,爱好...的验证)
Jun 09 Javascript
深入解析koa之中间件流程控制
Jun 17 Javascript
JavaScript实现滑块验证解锁
Jan 07 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
一些PHP写的小东西
2006/12/06 PHP
php事务处理实例详解
2014/07/11 PHP
使用laravel和ECharts实现折线图效果的例子
2019/10/09 PHP
第一个JavaScript入门基础 document.write输出
2010/02/22 Javascript
Webkit的跨域安全问题说明
2011/09/13 Javascript
js弹出确认是否删除对话框
2014/03/27 Javascript
使用时间戳解决ie缓存的问题
2014/08/20 Javascript
jQuery输入框密码的显示隐藏【代码分享】
2017/04/29 jQuery
canvas绘制爱心的几种方法总结(推荐)
2017/10/31 Javascript
小程序获取周围IBeacon设备的方法
2018/10/31 Javascript
js实现鼠标拖拽缩放div实例代码
2019/03/25 Javascript
微信小程序实现同一页面取值的方法分析
2019/04/30 Javascript
Vue数据双向绑定底层实现原理
2019/11/22 Javascript
vue 路由缓存 路由嵌套 路由守卫 监听物理返回操作
2020/08/06 Javascript
[01:44]《为梦想出发》—联想杯DOTA2完美世界全国高校联赛
2015/09/30 DOTA
[10:14]2018DOTA2国际邀请赛寻真——paiN Gaming不仅为自己而战
2018/08/14 DOTA
python中base64加密解密方法实例分析
2015/05/16 Python
Python中的zipfile模块使用详解
2015/06/25 Python
python连接字符串的方法小结
2015/07/13 Python
如何使用python把ppt转换成pdf
2019/06/29 Python
python实现将range()函数生成的数字存储在一个列表中
2020/04/02 Python
Python3获取cookie常用三种方案
2020/10/05 Python
python上下文管理的使用场景实例讲解
2021/03/03 Python
Agoda.com官方网站:便宜预订全球酒店,高达80%的折扣
2018/04/04 全球购物
For Art’s Sake官网:手工制作的奢华眼镜
2018/12/15 全球购物
Groupon荷兰官方网站:高达70%的折扣
2019/11/01 全球购物
PHP如何删除一个Cookie值
2012/11/15 面试题
期末自我鉴定
2014/01/23 职场文书
老公爱的承诺书
2014/03/31 职场文书
幼儿园户外活动总结
2014/07/04 职场文书
生物学专业求职信
2014/07/23 职场文书
公务员政审材料范文
2014/12/23 职场文书
革命电影观后感
2015/06/18 职场文书
致运动员加油稿
2015/07/21 职场文书
React 高阶组件HOC用法归纳
2021/06/13 Javascript
Python实现文字pdf转换图片pdf效果
2022/04/03 Python