Vue导出json数据到Excel电子表格的示例


Posted in Javascript onDecember 04, 2017

网上看了很多文档感觉都不全,这里写一篇完整的详细教程。

一、安装依赖(前面基本一样)

npm install file-saver --save
npm install xlsx --save
npm install script-loader --save-dev

二、下载两个所需要的js文件Blob.js和 Export2Excel.js。

这里贴下下载地址:

Export2Exce_3water.rar

三、src目录下新建vendor文件夹,将Blob.js和 Export2Excel.js放进去。

四、更改webpack.base.conf.js配置

在resolve的alias:

'vendor': path.resolve(__dirname, '../src/vendor')

五、在.vue文件中

script部分

data(){
 return{
  list:[
    {
     name:'韩版设计时尚风衣大',
     number:'MPM00112',
     salePrice:'¥999.00',
     stocknums:3423,
     salesnums:3423,
     sharenums:3423,
   },
   {
     name:'韩版设计时尚风衣大',
     number:'MPM00112',
     salePrice:'¥999.00',
     stocknums:3423,
     salesnums:3423,
     sharenums:3423,
   },
  ]
 }

methods:{
  formatJson(filterVal, jsonData) {
  
return jsonData.map(v => filterVal.map(j => v[j]))
  
},
  export2Excel() {
  

require.ensure([], () => {
  


const { export_json_to_excel } = require('../../../vendor/Export2Excel');
  


const tHeader = ['商品名称','商品货号','售价','库存','销量','分享',];
  


const filterVal = ['name', 'number', 'salePrice', 'stocknums', 'salesnums', 'sharenums', ];
  


const list = this.goodsItems;
  


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


export_json_to_excel(tHeader, data, '商品管理列表');
  

})
    }
}

template:

<button @click="export2Excel">导出</button>

这里说明一下:

1、export2Excel()中require的路径因个人项目结构不同可能需要单独调整,如果报module not found '../../Export2Excel.js'之类请自行修改路径。

2、tHeader是每一栏的名称,需手动输入。

Vue导出json数据到Excel电子表格的示例

3、filterVal是data中list的key值,也是要自己写的。

Vue导出json数据到Excel电子表格的示例

4、这里记得要与data里面的list名称对应

Vue导出json数据到Excel电子表格的示例

5、这里可定义导出的excel文件名

Vue导出json数据到Excel电子表格的示例

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Ucren Virtual Desktop V2.0
Nov 07 Javascript
基于jQuery的倒计时插件代码
May 07 Javascript
IE6已终止操作问题的2种情况及解决
Apr 23 Javascript
Node.js中的模块机制学习笔记
Nov 04 Javascript
JavaScript学习笔记之基础语法
Jan 22 Javascript
jQuery实现圣诞节礼物传送(花式轮播)
Dec 25 Javascript
Javascript DOM事件操作小结(监听鼠标点击、释放,悬停、离开等)
Jan 20 Javascript
Vue中util的工具函数实例详解
Jul 08 Javascript
对TypeScript库进行单元测试的方法
Jul 18 Javascript
js 计数排序的实现示例(升级版)
Jan 12 Javascript
js实现上下左右键盘控制div移动
Jan 16 Javascript
Vue项目接入Paypal实现示例详解
Jun 04 Javascript
微信小程序tabBar用法实例详解
Dec 04 #Javascript
详解如何实现一个简单的Node.js脚手架
Dec 04 #Javascript
浅谈React和Redux的连接react-redux
Dec 04 #Javascript
bootstrap3中container与container_fluid外层容器的区别讲解
Dec 04 #Javascript
深入浅出webpack之externals的使用
Dec 04 #Javascript
基于js 字符串indexof与search方法的区别(详解)
Dec 04 #Javascript
基于JavaScript中字符串的match与replace方法(详解)
Dec 04 #Javascript
You might like
php实现源代码加密的方法
2015/07/11 PHP
JS 事件绑定函数代码
2010/04/28 Javascript
JS俄罗斯方块,包含完整的设计理念
2010/12/11 Javascript
JS中toFixed()方法引起的问题如何解决
2012/11/20 Javascript
如何在node的express中使用socket.io
2014/12/15 Javascript
浅谈jQuery中事情的动态绑定
2017/02/12 Javascript
jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
2017/05/19 jQuery
jQuery+ajax实现修改密码验证功能实例详解
2017/07/06 jQuery
vue动态删除从数据库倒入列表的某一条方法
2018/09/29 Javascript
JS为什么说async/await是generator的语法糖详解
2019/07/11 Javascript
vue实现axios图片上传功能
2019/08/20 Javascript
微信小程序点击按钮动态切换input的disabled禁用/启用状态功能
2020/03/07 Javascript
[01:14:35]DOTA2上海特级锦标赛B组资格赛#1 Alliance VS Fnatic第一局
2016/02/26 DOTA
[38:31]完美世界DOTA2联赛PWL S3 Magma vs GXR 第一场 12.13
2020/12/17 DOTA
web.py在模板中输出美元符号的方法
2014/08/26 Python
详解Python中break语句的用法
2015/05/14 Python
python下如何查询CS反恐精英的服务器信息
2017/01/17 Python
Python统计python文件中代码,注释及空白对应的行数示例【测试可用】
2018/07/25 Python
python/sympy求解矩阵方程的方法
2018/11/08 Python
Pytorch实现基于CharRNN的文本分类与生成示例
2020/01/08 Python
Python socket处理client连接过程解析
2020/03/18 Python
opencv+python实现鼠标点击图像,输出该点的RGB和HSV值
2020/06/02 Python
python如何处理程序无法打开
2020/06/16 Python
详解HTML5 canvas绘图基本使用方法
2018/01/29 HTML / CSS
关于webview适配H5上传照片或者视频文件的方法
2020/11/04 HTML / CSS
JACK & JONES英国官方网站:欧洲领先的男装生产商
2017/09/27 全球购物
俄罗斯珠宝市场的领导者之一:Бронницкий ювелир
2019/10/02 全球购物
怎样写演讲稿
2014/01/04 职场文书
自我评价如何写好?
2014/01/05 职场文书
舞蹈比赛获奖感言
2014/02/04 职场文书
摄影专业毕业生求职信
2014/03/13 职场文书
协议书模板
2014/04/23 职场文书
学校督导评估方案
2014/06/10 职场文书
2014年局领导班子自身建设情况汇报
2014/11/21 职场文书
新手必备Python开发环境搭建教程
2021/05/28 Python
MyBatis配置文件解析与MyBatis实例演示
2022/04/07 Java/Android