vue-json-excel export excel table

Insert picture description here
Document address

name	Types of	description	Defaults
data	Array	The data to be exported.
fields	Object	The fields in the JSON object you want to export. If not provided, all attributes in JSON will be exported.
export-fields (exportFields)	Object	Used to solve the problem of other components that use variable fields, such as vee-validate. The working principle of exportFields is similar to the field
type	string	MIME type [xls, csv]	xls
name	string	The name of the file to be exported.	data.xls
header	string/Array	Data title. It can be a string (a title) or an array of strings (multiple titles).
footer	string/Array	The footer of the data. It can be a string (a footer) or an array of strings (multiple footers).
default-value (defaultValue)	string	When the row has no field value, it is used as a backup.
worksheet	string	The name of the worksheet tab.	‘Sheet1’
fetch	Function	A callback is made to get the data before downloading (if set), it will run immediately after the mouse is pressed and before the download process. Important information: Only valid if the data attribute is not defined.
before-generate	Function	Call back to call methods before generating/acquiring data, for example: display loading progress
before-finish	Function	Call back before the download box pops up to call the method, for example: hide the loading progress
stringifyLongNum	Boolean	Stringize long integers and decimals (to solve the problem of loss of digital precision), default value: false	false
escapeCsv	Boolean	This can escape the CSV value to solve some excel problems in the number field. But this will wrap each csv data with = "and" to avoid you having to set this prop to false. Default value: True	true

installation

npm install vue-json-excel

Component export

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

Complete code

<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>

vue-json-excel export excel table

Guess you like