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 陷阱 window全局对象
Nov 26 Javascript
javascript数组去重的六种方法汇总
Aug 16 Javascript
JS基于myFocus库实现各种功能的tab选项卡切换效果
Sep 19 Javascript
Node.js实现数据推送
Apr 14 Javascript
AngularJS $injector 依赖注入详解
Sep 14 Javascript
微信js-sdk界面操作接口用法示例
Oct 12 Javascript
jQuery用FormData实现文件上传的方法
Nov 21 Javascript
从零开始学习Node.js系列教程二:文本提交与显示方法
Apr 13 Javascript
使用Vue自定义指令实现Select组件
May 24 Javascript
vue-cli3 项目从搭建优化到docker部署的方法
Jan 28 Javascript
Vue基本使用之对象提供的属性功能
Apr 30 Javascript
vue中element 的upload组件发送请求给后端操作
Sep 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 xml常用函数的集合(比较详细)
2013/06/06 PHP
thinkphp 一个页面使用2次分页的实现方法
2013/07/15 PHP
遍历echsop的region表形成缓存的程序实例代码
2016/11/01 PHP
PHP环境搭建(php+Apache+mysql)
2016/11/14 PHP
用javascript动态调整iframe高度的方法
2007/03/06 Javascript
来自qq的javascript面试题
2010/07/24 Javascript
jQuery选择器简明总结(含用法实例,一目了然)
2014/04/25 Javascript
JavaScript中数据结构与算法(二):队列
2015/06/19 Javascript
把Node.js程序加入服务实现随机启动
2015/06/25 Javascript
jquery实现的仿天猫侧导航tab切换效果
2015/08/24 Javascript
Java  Spring 事务回滚详解
2016/10/17 Javascript
如何提高数据访问速度
2016/12/26 Javascript
Vue.js实现微信过渡动画左右切换效果
2017/06/13 Javascript
vue 封装自定义组件之tabal列表编辑单元格组件实例代码
2017/09/07 Javascript
vue自定义键盘信息、监听数据变化的方法示例【基于vm.$watch】
2019/03/16 Javascript
微信小程序系列之自定义顶部导航功能
2019/05/21 Javascript
Vue 实现监听窗口关闭事件,并在窗口关闭前发送请求
2020/09/01 Javascript
Nuxt 项目性能优化调研分析
2020/11/07 Javascript
[01:42]TI4西雅图DOTA2前线报道 第一顿早饭哦
2014/07/08 DOTA
用virtualenv建立多个Python独立虚拟开发环境
2017/07/06 Python
numpy实现合并多维矩阵、list的扩展方法
2018/05/08 Python
python实现决策树分类(2)
2018/08/30 Python
一百行python代码将图片转成字符画
2021/02/19 Python
python生成带有表格的图片实例
2019/02/03 Python
Python如何优雅获取本机IP方法
2019/11/10 Python
keras实现调用自己训练的模型,并去掉全连接层
2020/06/09 Python
基于Python pyecharts实现多种图例代码解析
2020/08/10 Python
css3教程之倾斜页面
2014/01/27 HTML / CSS
20佳惊艳的HTML5应用程序示例分享
2011/05/03 HTML / CSS
英国运动风奢侈品购物网站:Maison De Fashion
2020/08/28 全球购物
面向对象设计的原则是什么
2013/02/13 面试题
顶岗实习协议书
2015/01/29 职场文书
再读《皇帝的新衣》的读后感悟!
2019/08/07 职场文书
浅谈怎么给Python添加类型标注
2021/06/08 Python
解决mysql模糊查询索引失效问题的几种方法
2021/06/18 MySQL
简单聊聊TypeScript只读修饰符
2022/04/06 Javascript