数据导出不再麻烦：在Vue中实现Excel导出功能

前言

 📫 大家好，我是南木元元，热爱技术和分享，欢迎大家交流，一起学习进步！

 🍅 个人主页：南木元元

目录

前端导出 excel

安装依赖

ExcelJS

FileSaver.js

ExcelJS 基本使用

新建一个 excel 工作簿

工作簿中新建一张工作表

工作表中新增一行

导出 excel

结语

前端导出 excel

导出 Excel 文件的方式多种多样，可以前端导出，也可以后端导出，本文来分享一下如何在前端导出 excel 文件。以下几点是前端导出 Excel 文件的好处：

• 即时性与便捷性：用户可以在需要时立即导出当前页面或视图中的数据，无需等待后端处理，提高了操作的即时性和便捷性。

• 灵活性与定制化：前端导出允许开发者根据用户需求定制 Excel 文件的格式、内容和样式，提供高度灵活性和个性化服务。

• 减轻服务器负担：数据处理和文件生成的工作在前端完成，减少了后端服务器的负担，提高了系统整体性能和响应速度。

安装依赖

ExcelJS

ExcelJS 是一个用于在 JavaScript 中创建和操作 Excel 文件的库。它支持读取、编辑和生成 Excel 文件，ExcelJS 的主要特点包括：

• 创建和编辑工作簿：可以创建新的 Excel 工作簿或编辑现有的工作簿。
• 支持格式化：可以设置单元格的格式，包括字体、边框、填充颜色等。
• 操作数据：可以在单元格中读写数据，包括文本、数字和日期。
• 支持多种 Excel 特性：包括合并单元格、添加图表和插入图片等。
• 无依赖：ExcelJS 是纯 JavaScript 实现，不依赖于其他库，因此可以在浏览器和 Node.js 环境中使用。

FileSaver.js

FileSaver.js 是一个适用于 Web 应用的客户端文件保存解决方案，它实现了 HTML5 的 saveAs() 接口，使得 Web 应用能够在客户端生成文件并触发下载，而无需将文件发送到服务器。主要功能：

• 保存文件 ：FileSaver.js 允许开发者在客户端创建 Blob（二进制大对象）或 File 对象，并使用saveAs() 方法将其保存为本地文件。
• 跨浏览器兼容 ：它提供了跨浏览器的兼容性，包括处理不同浏览器对 Blob 和saveAs() 方法的支持差异。
• 自定义文件名：在保存文件时，开发者可以指定文件名，以满足用户的个性化需求。

安装依赖库：

npm install exceljs
npm install file-saver

ExcelJS 基本使用

新建一个 excel 工作簿

const workbook = new ExcelJS.Workbook();

工作簿中新建一张工作表

const sheet = workbook.addWorksheet('Sheet1');

工作表中新增一行

worksheet.addRow({id: 1, name: 'yuan'})

更多可以参考官方文档：https://github.com/exceljs/exceljs/blob/HEAD/README_zh.md

导出 excel

现在来测试下：

exportExcel() {
    // 创建工作簿
    const workbook = new ExcelJS.Workbook();
    const worksheet = workbook.addWorksheet("My Sheet");

    // 添加列标题
    worksheet.columns = [{ header: "姓名", key: "name", width: 30},
    {header: "年龄", key: "age", width: 10},
    {header: "城市", key: "city", width: 20},
    ];

    // 添加数据
    worksheet.addRow({name: "张三", age: 25, city: "北京"});
    worksheet.addRow({name: "李四", age: 30, city: "上海"});

    //  写入 buffer，导出 Excel 文件
    workbook.xlsx.writeBuffer().then((buffer) => {
    FileSaver.saveAs(new Blob([buffer], {type: "application/octet-stream"}),
        "表格.xlsx"
    );
    });
},

效果：

结语

🔥如果此文对你有帮助的话，欢迎💗关注 、👍 点赞 、⭐ 收藏 、✍️ 评论，支持一下博主~