当前位置:主页 > 聚焦 >

vue中怎么导出excel文件?

时间:2020-11-14 02:43:57

  今天再开发中遇到一件事情,就是怎样用已有数据导出excel文件,网上有许多方法,有说用数据流的方式,,但是现在我的想法是只是用数组数据,不接著与数据流的方式去实现,事实证明是可以的:

  1.安装依赖

  //npm npm install -S file-saver xlsx npm install -D script-loader

  2.在main.js中进行导入Bolb.js与Export2Excel.js

  两个js文件地址:

  链接:
提取码:sirm

  import Blob from './excel/Blob' import Export2Excel from './excel/Export2Excel.js'

  3.在组件中使用

  //导出的方法 exportExcel() { require.ensure([], () => { const { export_json_to_excel } = require('../excel/Export2Excel'); const tHeader = ['序号', '昵称', '姓名']; // 上面设置Excel的表格第一行的标题 const filterVal = ['index', 'nickName', 'name']; // 上面的index、nickName、name是tableData里对象的属性 const list = this.tableData; //把data里的tableData存到list const data = this.formatJson(filterVal, list); export_json_to_excel(tHeader, data, '列表excel'); }) }, formatJson(filterVal, jsonData) { return jsonData.map(v => filterVal.map(j => v[j]))

  tHeader是表头,filterVal 中的数据是表格的字段,tableData中存放表格里的数据,类型为数组,里面存放对象,表格的每一行为一个对象。

  如此,就可以了。

  相关:
 

  2020年前端vue面试题大汇总(附答案)

  vue2020最新的5个vue.js视频教程精选

  编程教学!!

热点推荐
1 攻击者利用无限铸造漏洞窃取约467万美元

消息,GoPlusSecurity报告称,攻击者在Secret Network上的一个修改过的cw20-ics20代币合约中利用了无限...

2 微信原生AI助手「小微」开启灰度测试,

消息,微信原生AI助手「小微」已在主界面左上角灰度上线,支持用户通过文字或语音操作微信...

3 特朗普自夸对伊战争成果:伊朗被“完全

消息,美国总统特朗普:激进的左派傻瓜和民主党人意识到我们在对抗伊朗的战争中做得多么...

4 CZ:不会退出市场且本轮比特币周期表现

消息,CZ在接受Galaxy Digital采访时表示,尽管比特币经历了50%的跌幅,但本轮周期表现仍优于以...

5 以军在黎南部地区持续空袭,造成至少

消息,据黎巴嫩民防部门20日宣布,当天以色列国防军在黎巴嫩南部奈拜提耶和杰津地区持续空...

6 预测市场单周交易量达108亿美元,创历史

消息,据a16z crypto数据显示,受SpaceX IPO、美国与伊朗和平协议、NBA总决赛及世界杯等多重全球...

7 挪威将禁止小学生使用生成式人工智能

消息,挪威首相斯特勒19日表示,为防止对学习产生负面影响,挪威将禁止小学生使用生成式人...

8 菲律宾SEC:已具备RWA代币化法律基础

消息,菲律宾证券交易委员会专员Rogelio Quevedo近日表示,菲律宾已具备接纳现实世界资产代币...

9 Custodia Bank与Vantage Bank推出稳定币转换代币

Custodia Bank与Vantage Bank提出一种可在银行存款与稳定币之间转换的代币结构。根据两家公司白皮...

10 Algorand Foundation公布后量子安全路线图,计

消息,Algorand Foundation公布了后量子安全路线年底前实现更广泛的量子抗性。路线图显示,Alg...

成都来彰科技 蜀ICP备2025134723号-1

资讯来源互联网,如有版权问题请联系管理员删除。