数据导出不再麻烦：在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"
    );
    });
},

效果：

结语

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