vue 导出excel表格实践

本文介绍如何使用Vue结合savexlsxfile和saver插件实现数据导出为Excel的功能。通过安装必要的插件并编写导出方法,可以将列表数据转换为Excel表格。提供了一个具体的示例代码。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

本文参考https://github.com/daoyuly/export2excel-demo

  • vue导出Excel,依赖于如下两个插件
    cnpm install --save xlsx file-saver
    
    cnpm install -D script-loader

     

  •  插件安装后:需要建立一个vendor文件夹,有如下两个js
  • 使用,书写导出方法
      exportExcel(){
          require.ensure([], () => {
            const { export_json_to_excel } = require('../vendor/Export2Excel'); //这里必须使用绝对路径
            const tHeader = ['车牌号', '司机', '运载类型', '方量', '进出', '单位', '时间']//表头信息
            const filterVal = ['CARNUMBER', 'DRIVER', 'CARTYPE', 'SQUARE','INOUTFLAG','DEPARTMENT','INOUTTIME']//对应表头的字段名
            const list = this.totalList;
            const data = this.formatJson(filterVal, list);
            export_json_to_excel(tHeader, data, '进出管理列表');// 导出的表格名称,根据需要自己命名
          })
         },
         formatJson(filterVal, jsonData){
         	return jsonData.map(v =>{
        	  return filterVal.map(j => v[j])
            })
         },

     

  • 结果:
  • 项目demo 地址:https://github.com/hongkangling/vue
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值