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表格了。

相关推荐
dsyyyyy11019 小时前
JavaScript变量
开发语言·javascript·ecmascript
kyriewen9 小时前
手写 Promise.all、race、any:不到 30 行代码,解决并发异步的所有姿势
前端·javascript·面试
胡志辉的博客11 小时前
深入浅出理解浏览器事件循环:从一道输出题讲到 Chrome 源码
前端·javascript·chrome·chromium·event loop
代码不加糖11 小时前
js中不会冒泡的事件有哪些?
前端·javascript·vue.js
懂懂tty11 小时前
Vue2与Vue3之间API差异
前端·javascript·vue.js
老毛肚12 小时前
软件测试期末考试
vue.js
海兰12 小时前
【web应用】Excel 项目数据自动化分析系统(AI 驱动分析)详细设计与部署指南(附源代码)
前端·人工智能·自动化·excel
小二·12 小时前
Next.js 15 全栈开发实战
开发语言·javascript·ecmascript
杨若瑜13 小时前
本地开发环境慢?localhost的锅!
vue.js
Rain50913 小时前
2.1 Nest.js 项目初始化与模块化架构
开发语言·前端·javascript·后端·架构·数据分析·node.js