vue 前端导出Excel

  1. 安装所需的依赖
npm install -S file-saver xlsx (-S =>--save 的简写 )
npm install -D script-loader (-D =>--save-dev 的简写)
  1. 创建Export2Excel和blob文件

具体在项目src目录下新建一个Excel的文件夹,并分别下载Blob.js和Export2Excel.js文件

这里附上这两个文件的github下载路径:Blob.js和Export2Excel.js
export2excle
3. 项目实战
先导入 import { exportJsonToExcel } from ‘@/Excel/Export2Excel’ 这里我重命名了原方法名,
原方法名为:export_json_to_excel, 因为在vue代码中使用的问题,我稍微修改了下

exportDataToExcel() {
  const list = this.tableSelections // 把要导出的数据tableData存到list
  if (list.length > 0) {
    // let table = this.$refs.itemDetailTable
    const tHeader = ['学号', '姓名', '科目', '成绩'] // 列头名称
    const filterVal = ['schoolNum', 'name', 'category', 'score'] // 列头字段
    // table.columns.forEach((column, index) => {
    //   if (column.property) {
    //     tHeader.push(column.label)
    //     filterVal.push(column.property)
    //   }
    // })
    const data = this.formatJson(filterVal, list)
    exportJsonToExcel(tHeader, data, '学生成绩excel') // 定义导出的excle名字
  } else {
    this.$Message('请先选择数据')
  }
},
// 格式化json数据
formatJson(filterVal, jsonData) {
  return jsonData.map(v => filterVal.map(j => v[j]))
}

// 代码中注释的部分是因为导出的数据重复,多push了一遍
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值