vue-json-excel导出excle表格

在这里插入图片描述
文档地址

名称类型描述默认值
dataArray要导出的数据。
fieldsObject您要导出的JSON对象中的字段。如果未提供,则将导出JSON中的所有属性。
export-fields (exportFields)Object用于解决其他使用变量字段的组件的问题,例如vee-validate。exportFields的工作原理类似于字段
typestringMIME类型[xls,csv]xls
namestring要导出的文件名。data.xls
headerstring/Array数据标题。可以是一个字符串(一个标题)或一个字符串数组(多个标题)。
footerstring/Array数据的页脚。可以是一个字符串(一个页脚)或一个字符串数组(多个页脚)。
default-value (defaultValue)string当行没有字段值时,用作备用。
worksheetstring工作表选项卡的名称。‘Sheet1’
fetchFunction进行回调,以在下载之前获取数据(如果已设置),则在按下鼠标后以及下载过程之前立即运行。重要信息:仅在未定义数据属性的情况下有效。
before-generateFunction在生成/获取数据之前回调以调用方法,例如:显示加载进度
before-finishFunction在下载框弹出之前进行回调以调用方法,例如:隐藏加载进度
stringifyLongNumBoolean字符串化长整数和十进制(解决数字精度丢失的问题),默认值:falsefalse
escapeCsvBoolean这样可以转义CSV值,以解决数字字段中的一些excel问题。但这将用=“和”包裹每个csv数据,以避免您必须将此prop设置为false。默认值:Truetrue

安装

npm install vue-json-excel

组件导出

import JsonExcel from "vue-json-excel";
  components: {
    "download-excel": JsonExcel,
  },

完整代码

<template>
  <div class="box">
    <download-excel
      :fields="fields"
      :data="tableData"
      name="用户数据"
      type="xls"
    >
      <el-button type="primary" icon="el-icon-download">导出表格</el-button>
    </download-excel>
  </div>
</template>

<script>
import JsonExcel from "vue-json-excel";
export default {
  components: {
    "download-excel": JsonExcel,
  },
  data() {
    return {
      tableData: [],
      fields: {
        日期: "date",
        姓名: "name",
        省份: "province",
        市区: "city",
        地址: "address",
        邮编: "zip",
      },
    };
  },
  mounted() {
    this.moreData();
  },
  methods: {
    moreData() {
      var list = [];
      for (let i = 0; i < 50; i++) {
        list.push({
          date: "2016-05-02",
          name: "王小虎" + i,
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200000,
        });
      }
      this.tableData = list;
    },
  },
};
</script>
<style lang="less" scoped>
</style>
©️2020 CSDN 皮肤主题: 游动-白 设计师:上身试试 返回首页