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>