纯前端下载excel数据(导出)

需求将表格中的数据导出为excel文件

工具 excel插件

在你的工具文件夹下新建index.js页面

在这里插入代码片
export function exportExcelFile(array, sheetName, fileName) {
  console.log(array, sheetName, fileName, 'array下载得数据数组,sheetName数据结构(不知道什么意思希望有大神指出来),fileName下载的文件名称')

  const jsonWorkSheet = xlsx.utils.json_to_sheet(array)
  console.log('jsonWorkSheet', jsonWorkSheet)
  const workBook = {
    SheetNames: [sheetName],
    Sheets: {
      [sheetName]: jsonWorkSheet
    }
  }
  console.log('workBook', workBook)
  return xlsx.writeFile(workBook, fileName)
}

然后在需要使用的vue页面导入

在这里插入代码片
<el-button @click="download()">下载</el-button>
    download() {
      // exportExcelFile
      //this.multipleSelection这个是选中的表格都在这个数组中因为要求是只下载选中的
      const sheetName = '表1'
      const fileName = '告警信息.xlsx'
      const tabList = []//这一块是因为下载下来是字段加上字段内容不符合要求所以将字段 改为汉文
      for (let index = 0; index < this.multipleSelection.length; index++) {
        const element = this.multipleSelection[index]
        const obj = {
          '姓名': element.userName,
          '身份证号': element.cardNo,
          '性别': element.gender,
          '身高': element.height,
          '体重': element.weight,
          '体温': element.temperature,
          '告警时间': element.createTime,
          '告警类型': '体检数据异常',
          '告警信息': element.isHandled == 1 ? '已处理' : '未处理',
          '体检结果': element.isAbnormal == 1 ? '异常' : '正常',
          '告警内容': element.resultDescription,
          '序号id': element.id,
          '血压(舒张压)': element.diastolicPressure,
          '血压(收缩压)': element.systolicPressure,
          '公司名称': element.deptName,
          '用户主键ID': element.userId
          //  element.warningType
        }
        tabList.push(obj)
      }
      console.log(this.multipleSelection)
      exportExcelFile(tabList, sheetName, fileName)
    },

最后导入虽然也写出来来但是没有搞懂
希望有大神讲解一下共同进步

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值