export-excel-tools

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/mahmud-js-tools@1.0.4/dist/index.min.js"></script> -->
<script src="https://unpkg.com/export-excel-tools@1.0.0/dist/index.js"></script>

<!-- 开发环境（未压缩） -->
<!-- <script src="https://unpkg.com/mahmud-js-tools@1.0.4/dist/index.js"></script> -->
<script src="https://unpkg.com/export-excel-tools@1.0.0/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 许可证。