vue导出excel 纯前端

最新推荐文章于 2025-04-29 15:24:22 发布

一天28小时

最新推荐文章于 2025-04-29 15:24:22 发布

阅读量148

点赞数

本文链接：https://blog.youkuaiyun.com/Programmerwhite/article/details/113102707

版权

本文介绍如何使用vue-json-excel组件实现将JSON数据导出为Excel文件的功能。通过具体示例代码展示了组件的配置方法及如何设置数据字段与表格数据的对应关系。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

下载

npm install vue-json-excel --save

使用

import JsonExcel from 'vue-json-excel'
// Vue.component('downloadExcel', JsonExcel) 全局导入  不推荐

<!--
 * @Author: zhang_gen_yuan
 * @Date: 2020-12-08 14:29:52
-->
<template>
  <div>
    <download-excel
      class="export-excel-wrapper"
      :data="json_data"
      :fields="json_fields"
      name="陈奎宁.xls"
    >
      <el-button type="primary" size="small">导出EXCEL</el-button>
    </download-excel>
  </div>
</template>

<script>
import JsonExcel from "vue-json-excel";
export default {
  components: {
    downloadExcel: JsonExcel,
  },
  data() {
    return {
      //定义表格  字段
      json_fields: {
        '姓名': "name",
        '年龄': "age",
        '城市': "city",
        '爱好':'ai'
      },
      //table数据  需要和字段对应
      json_data: [],
      //解析excel   utf-8   不然很可能导致乱码
      json_meta: [
        [
          {
            " key ": " charset ",
            " value ": " utf- 8 ",
          },
        ],
      ],
    };
  },
  methods:{
  //  模拟获取数据  赋值给 data
    getTable(){
      this.json_data = [
        {
          name:'陈奎宁',
          age:18,
          city:'郑州',
          ai:'狗'
        }
      ]
    }
  },
  created(){
    this.getTable();
  }
};
</script>

<style>
</style>

在这里插入图片描述