vue 点击按钮导出xls表格

首先下载一个插件 vue-json-excel，这个插件是json数据转换为简单excel的工具

npm i  vue-json-excel

然后在main.js中引入

import JsonExcel from 'vue-json-excel'
Vue.component('downloadExcel', JsonExcel)

代码示例：

<template>
  <div>
    <download-excel
      class="export-excel-wrapper"
      :data="tableData"
      :fields="tableFields"
      type="xls"
      worksheet="My Worksheet"
      name="用户信息"
    >
      <el-button>导出EXCEL</el-button>
    </download-excel>
    <template>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="date" label="日期" width="180">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="180">
        </el-table-column>
        <el-table-column prop="address" label="地址"> </el-table-column>
      </el-table>
    </template>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
      tableFields: {
        姓名: "name", //支持嵌套属性
        时间: "date", //支持嵌套属性
        地址: "address",
      },
      // json_meta: [
      //   [
      //     {
      //       " key ": " charset ",
      //       " value ": " utf- 8 "
      //     }
      //   ]
      // ]
    };
  },
};
</script>
 
<style>
</style>

具体api的使用
1.data 类型：Array 需要导出的数据，支持中文
2.fields 类型：object 定义需要导出数据的字段
3.name 类型：Sting 导出文件的名字
4.type 类型：String 导出文件的类型 默认xsl
5 export-fields (exportFields) ：object 用于解决使用可变字段的其他组件（例如vee-validate）的问题。exportFields的工作原理类似于字段
6.header 表头 可以传对个值 类型 String 或者 list
7 footer 页脚 可以传多个值 数据的页脚。可以是一个字符串（一个页脚）或一个字符串数组（多个页脚）。
8 default-value (defaultValue) 类型 String 当字段没有值的时候，付给默认值
9.worksheet 类型String 工作表选项卡的名称 默认 sheet1
10.fetch 进行回调，以在下载之前获取数据
11.before-generate 在生成/获取数据之前回调以调用方法
12.before-finish 在下载框弹出之前进行回调以调用方法，例如：隐藏加载进度
13.stringifyLongNum 字符串化长整数和十进制（解决数字精度丢失的问题），默认值：false