Vue3 将el-table中的数据导出为excel并下载

第一步安装:

npm install xlsx file-saver

第二步导入:

javascript 复制代码
import * as XLSX from 'xlsx'
import saveAs from 'file-saver'

第三步写函数:

javascript 复制代码
function exportExcel(){
  const workbook = XLSX.utils.book_new()
  const worksheet = XLSX.utils.json_to_sheet(tableData)
  XLSX.utils.book_append_sheet(workbook,worksheet,'Sheet1')
  const excelData = XLSX.write(workbook,{bookType:'xlsx',type:'array'})
  const blob = new Blob([excelData],{type:'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'})
  saveAs(blob,'table_data.xlsx')
}

其中tableData就是el-table中的数据源

相关推荐
qzhqbb9 分钟前
Web 服务器(Nginx、Apache)
服务器·前端·nginx
天若有情67313 分钟前
前端进阶必看:吃透这些高阶知识,告别CRUD,迈向高级前端工程师
前端·状态模式
coderYYY42 分钟前
git push报错Authentication failed for ‘xxx’也不会弹要求输入用户名密码的最终解决方法
前端·git·gitee·github
l1t1 小时前
QWen 3.5plus总结的总结基准测试结果的正确方法
前端·数据库
kyriewen112 小时前
为什么我的代码在测试环境跑得好好的,一到用户电脑就崩?原来凶手躲在地址栏旁边
开发语言·前端·javascript·chrome·ecmascript·html5
小北方城市网2 小时前
JavaScript 实战 —— 实现一个简易的 TodoList(适合前端入门 / 进阶)
开发语言·前端·javascript
是上好佳佳佳呀2 小时前
【前端(二)】CSS 知识梳理:从编写位置到选择器优先级
前端·css
倾颜2 小时前
我是怎么把单 Tool Calling 升级成多 Tool Runtime 的
前端·后端·langchain
清汤饺子2 小时前
Superpowers:给 AI 编程 Agent 装上"工程化超能力"
前端·javascript·后端
踩着两条虫2 小时前
AI驱动的Vue3应用开发平台 深入探究(十三):物料系统之区块与页面模板
前端·vue.js·人工智能·架构·系统架构