Vue Excel 导出工具组件

一个简单易用的 Vue Excel 导出工具组件。

安装

npm install export-excel-tools

特性

• 🚀 数据导出 - 支持导出数据为 Excel 文件
• 🔄 文件名 - 支持自定义文件名
• 🎯 样式 - 支持自定义按钮样式
• 📦 轻量级 - 无依赖，体积小，加载快
• 📚 文档 - 详细文档和示例
• 🛠️ 自定义 - 支持自定义按钮样式和文件名

使用方法

全局注册

import Vue from "vue";
import ExportExcelTools from "export-excel-tools";

Vue.use(ExportExcelTools);

局部注册

import { ExcelExporter } from "export-excel-tools";

export default {
  components: {
    ExcelExporter,
  },
};

在模板中使用

<template>
  <excel-exporter
    :data="tableData"
    fileName="我的数据"
    buttonText="导出Excel"
    @export-success="onExportSuccess"
    @export-error="onExportError"
  />
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: "张三", age: 25, city: "北京" },
        { name: "李四", age: 30, city: "上海" },
      ],
    };
  },
  methods: {
    onExportSuccess() {
      console.log("导出成功");
    },
    onExportError(error) {
      console.error("导出失败:", error);
    },
  },
};
</script>

目录结构

export-excel-tools/   # 项目根目录
├── src/   # 组件源码
├── index.js # 入口文件
├── README.md # 描述文件
├── LICENSE # 许可证
├── package.json # 包信息

Props

| 属性名 | 类型 | 必填 | 默认值 | 说明 | | ---------- | ------ | ---- | --------------- | -------------------------- | | data | Array | 是 | - | 要导出的数据数组 | | fileName | String | 否 | 'exported-data' | 导出的文件名（不含扩展名） | | buttonText | String | 否 | '导出 Excel' | 按钮显示的文本 |

事件

| 事件名 | 说明 | 回调参数 | | -------------- | -------------- | --------------- | | export-success | 导出成功时触发 | - | | export-error | 导出失败时触发 | error: 错误信息 |

License

🛠️CDN

<!-- <script src="https://unpkg.com/[email protected]/dist/index.min.js"></script> -->
<script src="https://unpkg.com/[email protected]/dist/index.js"></script>

<!-- 开发环境（未压缩） -->
<!-- <script src="https://unpkg.com/[email protected]/dist/index.js"></script> -->
<script src="https://unpkg.com/[email protected]/dist/index.js"></script>
``` ## 🧪单元测试 项目使用 Jest 进行完整测试，运行以下命令执行测试： ```bash npm
run test

🤝 贡献指南

欢迎对这个项目进行贡献！请遵循以下步骤：

1. Fork 本仓库。
2. 创建新分支 (git checkout -b feature/your-feature)。
3. 提交更改 (git commit -m 'Add some feature')。
4. 推送分支 (git push origin feature/your-feature)。
5. 提交 Pull Request。

• 🎯 欢迎访问我的技术博客：- © https://gitee.com/mahmudtjcu
• 🎯 欢迎访问我的 Gitee：- © https://www.cnblogs.com/mahmud

📜 许可证

本项目使用 MIT 许可证。