资源包网址：GitHub - jecovier/vue-json-excelhttps://github.com/jecovier/vue-json-excel

参数列表：

参数 类型 说明 默认值
data Array 要导出的数据。
fields Object 要导出的 JSON 对象中的字段。如果未提供，则将导出 JSON 中的所有属性。
export-fields (exportFields) Object 用于修复使用变量字段的其他组件（如 vee 验证）的问题。导出字段的工作方式与字段完全相同
type string Mime类型[xls, csv] xls
name string 要导出的文件名。 data.xls
header string/Array 数据的标题。可以是字符串（一个标题）或字符串数组（多个标题）。
title(deprecated) string/Array 与标题相同，出于复古兼容性目的，保留标题，但由于与 HTML5 title 属性冲突，不建议使用标题。
footer string/Array 数据的页脚。可以是字符串（一个页脚）或字符串数组（多个页脚）。
default-value (defaultValue) string 当行没有字段值时，用作回退。 ''
worksheet string 工作表选项卡的名称。 'Sheet1'
fetch Function

在下载之前回调获取数据，如果它被设置，它会在鼠标按下后和下载之前立即运行。

重要提示:只有在没有定义数据道具的情况下才有效。
before-generate Function 在生成/获取数据之前调用一个方法，例如:显示加载进度
before-finish Function 回调在下载框弹出之前调用一个方法，例如:隐藏加载进度
stringifyLongNum Boolean 字符串化长数字和小数(解决数字准确性损失的问题)，默认值:false
escapeCsv Boolean 这将转义CSV值，以修复一些数字字段的excel问题。但这会用=" and "包装每个csv数据，为了避免你必须将该道具设置为false。默认值:真正的

1.安装 vue-json-excel 

npm install vue-json-excel -S

2.全局引入vue-json-excel

//该文件为main.js
import Vue from "vue";
import JsonExcel from "vue-json-excel";

Vue.component("downloadExcel", JsonExcel);

3.在需要导出excel文件的组件中使用downloadExcel组件

<template>
    <download-excel
      :fetch="fetchData"
      :fields="json_fields"
      worksheet="My Worksheet"
      name="导出的文件名字.xls"
      class="excel"
    >
        <el-button size="mini" class="el-icon-download"></el-button>
    </download-excel>
</template>

<script type="text/javascript">
export default {
  data() {
    return {
      list:[],
      json_fields: {},
    };
  },
  methods: {
    fetchData() {
      this.json_fields = {//表头名：对应表格数据中的属性名
        创建时间: "CREATED_TIME",
        集团名称: "Group_Name",
        公司名称: "Corp_Name",
        部门名称: "Dept_Name",
        创建人: "CREATED_BY",
        集团备注: "Group_Memo",
        公司备注: "Corp_Memo",
        部门备注: "Dept_Memo",
        状态: {
                field: "Status",
                callback: (value) => {
                return value === true ? "启用" : "禁用";
            },
      },
      };
      let excelList = [];
      //this.list是从后台接口获取的一个三级数据（注意：使用forEach前，先判断数组存不存在！）
      this.list.forEach((item) => {
        excelList.push(item);
        if (item.CorpList) {
          item.CorpList.forEach((item1) => {
            excelList.push(item1);
            if (item1.DeptList) {
              item1.DeptList.forEach((item2) => {
                excelList.push(item2);
              });
            }
          });
        }
      });
      return excelList ;
    },
};
</script>

4.点击导出按钮，浏览器自动下载excel文件。

# vue.js # json # 前端
Logo
魔乐社区

魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。

更多推荐

cover

全家桶集齐！Qwen3.5四款小模型上线魔乐社区，附昇腾全套实践教程

avatar 魔乐社区

Pont - 搭建前后端之桥：高效、灵活的接口管理工具

Pont 是一款强大的数据服务层解决方案，它能够帮助开发者快速搭建前后端之间的桥梁，实现接口的高效管理和代码自动生成。无论是新手还是有经验的开发者，都能通过 Pont 轻松处理接口文档、生成类型安全的 API 代码，从而显著提升开发效率。[![Pont 工具标志](https://raw.gitcode.com/gh_mirrors/po/pont/raw/3f1b7d4bbba3fd2dda

avatar 魔乐社区

如何快速上手 hvac：HashiCorp Vault Python 客户端零基础入门指南

**hvac** 是 HashiCorp Vault 的 Python 3.X 客户端库，专为开发者提供简单高效的 Vault 交互方式。无论你是需要管理密钥、配置身份验证，还是实现安全的秘密数据存储，hvac 都能帮助你轻松搞定 Vault 的各项操作。本文将带你零基础快速入门，从安装到基础操作，让你在几分钟内即可上手使用这个强大的工具。[![hvac 客户端 Logo](https://r

avatar 魔乐社区