导出excel功能,前端的解决方案

import { utils, writeFileXLSX } from 'xlsx'
// 导出excel
async exportToExcel() {
  // 获取要导出的业务数据(这里的接口自己改成实际使用的接口)
  const res = await getRuleListAPI(this.params)
  // 表头英文字段key(这里的数据改成接口返回的实际数据,原则是即是用来下载成export的表头又是后台返回的数据,这样才好从后台的数据里面分离出我们要的数据。)
  const tableHeaderKeys = ['ruleNumber', 'ruleName', 'freeDuration', 'chargeCeiling', 'chargeType', 'ruleNameView']
  // 表头中文字段value(这里改成需要展示的数据,一般来说和上面的英文的都是对应关系。用于表格输出后的表头)
  const tableHeaderValues = ['计费规则编号', '计费规则名称', '免费时长(分钟)', '收费上线(元)', '计费方式', '计费规则']
  // 以excel表格的顺序调整后端数据
  const sheetData = res.data.rows.map((item) => {
    const obj = {}
    tableHeaderKeys.forEach(key => {
      obj[key] = item[key]
    })
    return obj
  })
  // 创建一个工作表
  const worksheet = utils.json_to_sheet(sheetData)
  // 创建一个新的工作簿
  const workbook = utils.book_new()
  // 把工作表添加到工作簿(这个Data是表名,可以自己改)
  utils.book_append_sheet(workbook, worksheet, 'Data')
  // 改写表头(origin是起始位置的意思)
  utils.sheet_add_aoa(worksheet, [tableHeaderValues], { origin: 'A1' })
  // 这个最后的是工作簿的名称,即文件名。
  writeFileXLSX(workbook, 'SheetJSVueAoO.xlsx')
}

这个xlsx需要npm i,官网放在这Data Export | SheetJS Community Edition

一般下载的命令是

npm i --save https://cdn.sheetjs.com/xlsx-0.20.1/xlsx-0.20.1.tgz

该修改的,都用小括号括起来了。这个csdn工具的原因,只能写成这样。

  • 9
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
当Java导出大量数据到Excel时,可能会因为数据量过大导致前端请求超时。这是由于以下几个原因引起的: 1. 数据量大:导出大量数据需要较长的处理时间和较高的系统资源消耗。如果数据量远远超过前端请求能承受的极限,前端请求时间可能超出设置的时间限制,从而导致超时。 2. 网络传输限制:在数据量较大的情况下,数据的传输时间也会相应增加。如果网络传输速度慢或网络连接不稳定,请求可能会在传输过程中超时。 为了解决这个问题,可以考虑以下几个方案: 1. 分批导出:将大量数据分成小批次进行导出。可以在前端通过多次请求来获取分批次的数据,然后在后台进行数据导出。这样可以避免单次请求时间过长导致的超时问题。 2. 后台异步导出:当前端发起数据导出请求时,后台可以先返回一个任务标识,告知前端任务已经在后台进行处理。后台将数据导出的过程放在一个异步任务中执行,不会阻塞前端请求。前端可以轮询任务状态,直到任务完成并提供下载链接。 3. 压缩文件导出:将导出的数据以压缩文件的形式返回给前端,可以减小数据的传输量,加快数据传输速度。前端可以在接收到文件后再进行解压和处理。 4. 前端分页获取:前端可以通过分页的方式获取数据,每次请求只获取一页的数据。这样可以减少单次请求的数据量,降低请求超时的风险。 通过上述方案,可以有效地解决Java导出Excel数据量大导致前端请求超时的问题,提高系统的可用性和用户体验。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值