在Vue中实现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"
    );
    });
},

效果：

到此这篇关于在Vue中实现Excel导出功能(数据导出)的文章就介绍到这了,更多相关vue excel导出内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！