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中的数据源

相关推荐
玉米Yvmi4 分钟前
从零理解 CSS 弹性布局:轻松掌控页面元素排布
前端·javascript·css
西洼工作室4 分钟前
前端js汉字手写练习系统
前端·javascript·css
程序员爱钓鱼8 分钟前
Node.js 编程实战:CSV&JSON &Excel 数据处理
前端·后端·node.js
徐同保11 分钟前
n8n+GPT-4o一次解析多张图片
开发语言·前端·javascript
老华带你飞14 分钟前
工会管理|基于springboot 工会管理系统(源码+数据库+文档)
java·数据库·vue.js·spring boot·后端·spring
DanyHope18 分钟前
LeetCode 128. 最长连续序列:O (n) 时间的哈希集合 + 剪枝解法全解析
前端·leetcode·哈希算法·剪枝
GISer_Jing23 分钟前
AI赋能前端:从核心概念到工程实践的全景学习指南
前端·javascript·aigc
|晴 天|24 分钟前
前端事件循环:宏任务与微任务的深度解析
前端
用户44455436542632 分钟前
Android开发中的封装思路指导
前端
前端OnTheRun39 分钟前
如何禁用项目中的ESLint配置?
javascript·vue.js·eslint