vue-json-excel导出excle表格

明知山

发布于 2020-10-13 23:08:04

3.2K1

发布于 2020-10-13 23:08:04

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

安装

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-10-12 ，如有侵权请联系 cloudcommunity@tencent.com 删除

json