vue表格列表导出excel

你可以通过下面的步骤使用Vue导出Excel表格:

  1. 安装依赖 安装两个依赖包:

    npm install --save xlsx file-saver

  2. 创建Excel导出方法

    //导出 Excel
    exportExcel() {
    // 表格数据
    let data = this.tableData;
    // 转化为工作簿对象
    const workbook = XLSX.utils.book_new();
    // 表头
    const header = [
    '姓名',
    '年龄',
    '性别',
    ];
    // 表头对应的键名
    const keys = [
    'name',
    'age',
    'gender',
    ];
    // 表格数据处理
    const arr = [];
    data.forEach(item => {
    const obj = {};
    keys.forEach(key => {
    obj[key] = item[key];
    });
    arr.push(obj);
    });
    // 创建工作表
    const worksheet = XLSX.utils.json_to_sheet(arr, { header });
    // 将工作表添加到工作簿
    XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
    // 导出 Excel
    XLSX.writeFile(workbook, 'table.xlsx');
    }

  3. 创建导出Excel的按钮

现在你就可以导出Excel表格了。

相关推荐
Hilaku17 分钟前
为什么大厂对前端算法要求极高?
前端·javascript·程序员
你可如意24 分钟前
从Promise开始,一篇让你彻底建立起JS的异步编程模型
javascript
用户84298142418101 小时前
AI时代,JS混淆加密还有用吗?
前端·javascript
用户83134859306981 小时前
Cesium 实现行政区内部遮罩
vue.js·webgl·cesium
申君健24864182772022 小时前
MCP TypeScript SDK v2 完整升级变化说明
javascript
卤蛋fg62 小时前
vxe-table 自定义复制粘贴逻辑:精确控制单元格数据转换
vue.js
Ivanqhz2 小时前
Rust Lazy浅析
java·javascript·rust
铁皮饭盒3 小时前
面试官:如何用 Bun + JS 实现安全的文件 MCP 工具集
前端·javascript·后端
张人玉4 小时前
基于 Vue 3 + ECharts + Express + SQLite 构建的新能源汽车销量数据分析与可视化平台——新能源汽车销量数据分析系统
数据库·vue.js·sqlite·echarts
weixin_BYSJ19875 小时前
springboot3家政平台小程序--附源码00904
java·javascript·spring boot·python·django·flask·php