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 相关文章推荐
javascript js cookie的存储,获取和删除
Dec 29 Javascript
javaScript 关闭浏览器 (不弹出提示框)
Jan 31 Javascript
sails框架的学习指南
Dec 22 Javascript
浅谈javascript函数式编程
Sep 06 Javascript
jackson解析json字符串,首字母大写会自动转为小写的方法
Dec 22 Javascript
jQuery实现模糊查询的方法分析
May 10 jQuery
Vue登录拦截 登录后继续跳转指定页面的操作
Aug 04 Javascript
vue递归获取父元素的元素实例
Aug 07 Javascript
javascript操作向表格中动态加载数据
Aug 27 Javascript
使用Vant完成DatetimePicker 日期的选择器操作
Nov 12 Javascript
springboot+vue实现文件上传下载
Nov 17 Vue.js
JavaScript实现前端网页版倒计时
Mar 24 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程序员的13个好习惯小结
2012/02/20 PHP
PHP生成指定随机字符串的简单实现方法
2015/04/01 PHP
thinkPHP3.2简单实现文件上传的方法
2016/05/16 PHP
use jscript Create a SQL Server database
2007/06/16 Javascript
用函数式编程技术编写优美的 JavaScript_ibm
2008/05/16 Javascript
jQuery EasyUI NumberBox(数字框)的用法
2010/07/08 Javascript
JS简单实现文件上传实例代码(无需插件)
2013/11/15 Javascript
防止jQuery ajax Load使用缓存的方法小结
2014/02/22 Javascript
JavaScript:Date类型全面解析
2016/05/19 Javascript
Javascript 5种方法实现过滤删除前后所有空格
2016/06/22 Javascript
JS实现隐藏同级元素后只显示JS文件内容的方法
2016/09/04 Javascript
javascript构造函数以及原型对象的理解
2017/01/13 Javascript
Angular.JS通过指令操作DOM的方法
2017/05/10 Javascript
JavaScript闭包_动力节点Java学院整理
2017/06/27 Javascript
Bootstrap Multiselect 常用组件实现代码
2017/07/09 Javascript
vue结合axios与后端进行ajax交互的方法
2018/07/06 Javascript
详解vue-cli3 中跨域解决方案
2019/04/10 Javascript
简单介绍Python中的len()函数的使用
2015/04/07 Python
使用python3.5仿微软记事本notepad
2016/06/15 Python
Django的分页器实例(paginator)
2017/12/01 Python
django进阶之cookie和session的使用示例
2018/08/17 Python
python中安装django模块的方法
2020/03/12 Python
Python数据正态性检验实现过程
2020/04/18 Python
Python 开发工具通过 agent 代理使用的方法
2020/09/27 Python
如何基于Python和Flask编写Prometheus监控
2020/11/25 Python
CSS3动画和HTML5新特性详解
2020/08/31 HTML / CSS
为您搜罗全球潮流時尚品牌:HBX
2019/12/04 全球购物
24岁生日感言
2014/01/13 职场文书
决心书标准格式
2014/03/11 职场文书
初三学生评语大全
2014/04/24 职场文书
作风年建设汇报材料
2014/08/14 职场文书
2014年公务员个人工作总结
2014/11/22 职场文书
防溺水安全教育主题班会
2015/08/12 职场文书
接收函
2019/04/22 职场文书
Python re.sub 反向引用的实现
2021/07/07 Python
django中websocket的具体使用
2022/01/22 Python