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 相关文章推荐
重定向实现代码
Nov 20 Javascript
修改jquery里的dialog对话框插件为框架页(iframe) 的方法
Sep 14 Javascript
js报错 Object doesn't support this property or method的原因分析
Mar 31 Javascript
Jquery多选下拉列表插件jquery multiselect功能介绍及使用
May 24 Javascript
BootStrap的双日历时间控件使用
Jul 25 Javascript
浅谈angular4实际项目搭建总结
Dec 01 Javascript
vue中mint-ui的使用方法
Apr 04 Javascript
vuex进阶知识点巩固
May 20 Javascript
JavaScript递归函数解“汉诺塔”算法代码解析
Jul 05 Javascript
Vue中保存数据到磁盘文件的方法
Sep 06 Javascript
JavaScript缓动动画函数的封装方法
Nov 25 Javascript
基于angular实现树形二级表格
Oct 16 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 5.0对象模型深度探索之绑定
2006/09/05 PHP
PHP常用技术文之文件操作和目录操作总结
2014/09/27 PHP
PHP实现文件上传和多文件上传
2015/12/24 PHP
ThinkPHP使用Ueditor的方法详解
2016/05/20 PHP
thinkPHP5.0框架事务处理操作简单示例
2018/09/07 PHP
用Javascript做flash做的事..才完成的一个类.Auntion Action var 0.1
2007/02/23 Javascript
用prototype实现的简单小巧的多级联动菜单
2007/03/24 Javascript
jQuery 表单验证扩展代码(一)
2010/10/11 Javascript
ExtJs事件机制基本代码模型和流程解析
2010/10/24 Javascript
JQUERY 获取IFrame中对象及获取其父窗口中对象示例
2013/08/19 Javascript
js跑步算法的实现代码
2013/12/04 Javascript
js焦点文字滚动效果代码分享
2015/08/25 Javascript
window.onerror()的用法与实例分析
2016/01/27 Javascript
盘点javascript 正则表达式中 中括号的【坑】
2016/03/16 Javascript
使用bootstrap validator的remote验证代码经验分享(推荐)
2016/09/21 Javascript
Javascript ES6中数据类型Symbol的使用详解
2017/05/02 Javascript
用JS编写一个函数,返回数组中重复出现过的元素(实例)
2017/09/14 Javascript
全站最详细的Vuex教程
2018/04/13 Javascript
深入浅析golang zap 日志库使用(含文件切割、分级别存储和全局使用等)
2020/02/19 Javascript
vue render函数动态加载img的src路径操作
2020/10/26 Javascript
[02:39]我与DAC之Newbee.Moogy:从论坛到TI
2018/03/26 DOTA
讲解Python中运算符使用时的优先级
2015/05/14 Python
python中的lambda表达式用法详解
2016/06/22 Python
python thrift搭建服务端和客户端测试程序
2018/01/17 Python
Django Admin实现三级联动的示例代码(省市区)
2018/06/22 Python
对Python Pexpect 模块的使用说明详解
2019/02/14 Python
如何使用python操作vmware
2019/07/27 Python
python numpy数组中的复制知识解析
2020/02/03 Python
阿迪达斯比利时官方商城:adidas比利时
2016/10/10 全球购物
PatPat德国:妈妈的每日优惠
2019/10/02 全球购物
杭州信雅达系统.NET工程师面试试题
2015/02/08 面试题
大学生第一学年自我鉴定
2014/09/12 职场文书
2015年库房管理工作总结
2015/10/14 职场文书
2016毕业实习单位评语大全
2015/12/01 职场文书
用Python爬取某乎手机APP数据
2021/06/15 Python
前端监听websocket消息并实时弹出(实例代码)
2021/11/27 Javascript