vue 实现前端处理 “数组数据“ 转excel格式文件,并导出excel表格

一、安装插件 XLSX

npm install XLSX --save

二、页面引入

<button @click="getDownList()">导出</button>

<script setup lang="ts">
import { ref } from "vue"
import * as XLSX from 'xlsx'

const datas = ref([
  {jobName:'作业1',studentName:'李佳',subjectName:'数学',schoolName:'重庆八中',gradeName:'高2023级',className:'1班'},
  {jobName:'作业1',studentName:'李佳',subjectName:'数学',schoolName:'重庆八中',gradeName:'高2023级',className:'1班'},
  {jobName:'作业1',studentName:'李佳',subjectName:'数学',schoolName:'重庆八中',gradeName:'高2023级',className:'1班'},
  {jobName:'作业1',studentName:'李佳',subjectName:'数学',schoolName:'重庆八中',gradeName:'高2023级',className:'1班'},
  {jobName:'作业1',studentName:'李佳',subjectName:'数学',schoolName:'重庆八中',gradeName:'高2023级',className:'1班'},
  {jobName:'作业1',studentName:'李佳',subjectName:'数学',schoolName:'重庆八中',gradeName:'高2023级',className:'1班'}
])
// 导出接口
const getDownList = async () => {
  const modifiedData = datas.value.map((item:any) => {
    return {
      '作业名称': item.jobName,
      '学生姓名': item.studentName,
      '科目': item.subjectName,
      '学校': item.schoolName,
      '年级': item.gradeName,
      '班级': item.className
    }
  })
  const worksheet = XLSX.utils.json_to_sheet(modifiedData)
  const workbook = XLSX.utils.book_new()
  XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1')
  const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' })
  saveAsExcelFile(excelBuffer, downGropParams.group + '(' + downGropParams.student + ')')
}
//保存下载文件
const saveAsExcelFile = (buffer:any, fileName:string) => {
  const data = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' })
  const link = document.createElement('a')
  link.href = window.URL.createObjectURL(data)
  link.download = fileName + '.xlsx'
  link.click()
}

</script>

       希望我的愚见能够帮助你哦~,若有不足之处,还望指出,你们有更好的解决方法,欢迎大家在评论区下方留言支持,大家一起相互学习参考呀~

  • 10
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在Vue项目中前端导出具有多级表头的表格Excel文件,你可以使用`xlsx`库结合一些操作来实现。下面是一个示例代码: 首先,确保已经安装了`xlsx`库。在项目的根目录下运行以下命令: ``` npm install xlsx ``` 然后,在需要导出Excel文件的组件中,可以按照以下方式编写代码: ```vue <template> <div> <button @click="exportExcel">导出Excel</button> </div> </template> <script> import XLSX from 'xlsx'; export default { methods: { exportExcel() { const headers = [ { text: '姓名', rowspan: 2 }, { text: '信息', colspan: 2 }, { text: '科目', rowspan: 2 }, { text: '成绩', colspan: 3 } ]; const data = [ ['张三', '学生', '数学', '语文', '英语'], [null, null, 90, 80, 85] ]; const mergeCells = [ { s: { r: 0, c: 1 }, e: { r: 0, c: 2 } }, { s: { r: 0, c: 3 }, e: { r: 0, c: 5 } } ]; const ws = XLSX.utils.aoa_to_sheet([headers, ...data]); ws['!merges'] = mergeCells; const wb = XLSX.utils.book_new(); XLSX.utils.book_append_sheet(wb, ws, 'Sheet1'); XLSX.writeFile(wb, 'data.xlsx'); } } } </script> ``` 在上述代码中,我们定义了要导出表格的表头`headers`和数据`data`,以及合并单元格的信息`mergeCells`。在`exportExcel`方法中,我们首先将表头和数据合并为一个二维数组,然后使用`XLSX.utils.aoa_to_sheet`方法将其换为工作表对象`ws`。接着,我们设置合并单元格的信息,并将其赋值给工作表对象的`!merges`属性。最后,创建工作簿对象`wb`,将工作表对象添加到工作簿中,并使用`XLSX.writeFile`方法将工作簿保存为Excel文件。 在用户点击"导出Excel"按钮时,将触发`exportExcel`方法,从而导出具有多级表头的表格Excel文件。 请注意,这种方式只能在现代浏览器中使用,并且导出Excel文件将保存在用户的本地文件系统中。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值