vue - vue-json-excel
使用方法
- npm 安装依赖
npm install vue-json-excel
- 项目主文件入口main.js全局引入
//excel
import JsonExcel from 'vue-json-excel'
Vue.component('downloadExcel', JsonExcel)
- 直接在项目中使用
Name | Type | Description |
---|---|---|
data | Array | Data to be exported |
fields | Object | fields inside the Json Object that you want to export. If no given, all the properties in the Json are exported |
export-fields (exportFields) | Object | this prop is used to fix the problem with other components that use the variable fields, like vee-validate. exportFields works exactly like fields |
type | string | mime type [xls, csv], default: xls |
name | string | filename to export, deault: data.xls |
title | string/Array | Title(s) for the data, could be a string or an array of strings (multiple titles) |
footer | string/Array | Footer(s) for the data, could be a string or an array of strings (multiple footers) |
default-value (defaultValue) | string | Use as fallback when the row has no field values, default: '' |
worksheet | string | Name of the worksheet tab. default: 'Sheet1' |
fetch | Function | Callback to fetch data before download, if it's set it runs immediately after mouse pressed and before download process. IMPORTANT: only works if no data prop is defined (文件下载前通过接口获取数据,不需要data属性) |
before-generate | Function | Callback to call a method right before the generate / fetch data, eg:show loading progress(文件下载前的操作) |
before-finish | Function | Callback to call a method right before the download box pops out, eg:hide loading progress(文件下载结束操作) |
//有数据,无需点击时获取 必需 data ,fields 属性
<download-excel :data="json_data" :fields="json_fields" name="filename.xls" >
<el-button type="warning">导出excel</el-button>
</download-excel>
<script>
export default {
data () {
return{
//excel表格的标题头
json_fields: {
'Complete name': 'name', //excel标题:数据中的key
'City': 'city',
'Telephone': 'phone.mobile',
'Telephone 2' : {
field: 'phone.landline',
callback: (value) => {
return `Landline Phone - ${value}`;
}
},
},
//表格数据
json_data: [
{
'name': 'Tony Peña',
'city': 'New York',
'country': 'United States',
'birthdate': '1978-03-15',
'phone': {
'mobile': '1-541-754-3010',
'landline': '(541) 754-3010'
}
},
{
'name': 'Thessaloniki',
'city': 'Athens',
'country': 'Greece',
'birthdate': '1987-11-23',
'phone': {
'mobile': '+1 855 275 5071',
'landline': '(2741) 2621-244'
}
}
],
json_meta: [
[
{
'key': 'charset',
'value': 'utf-8'
}
]
],
}
}
}
</script>
//无数据,点击时获取 需要fetch ,fields属性 (有fetch时不需要data属性)
<download-excel :fetch= "fetchData" :fields="json_fields" :before-generate = "startDownload" :before-finish = "finishDownload" name="filename.xls" >
<el-button type="warning">导出excel</el-button>
</download-excel>
<script>
export default {
data () {
return{
json_fields: {
'Complete name': 'name',
'City': 'city',
'Telephone': 'phone.mobile',
'Telephone 2' : {
field: 'phone.landline',
callback: (value) => {
return `Landline Phone - ${value}`;
}
},
},
}
},
methods:{
async fetchData(){
const { list } = await this.$store.dispatch("get/infolist", {id : 1});
return list;
},
startDownload(){
alert('show loading');
},
finishDownload(){
alert('hide loading');
}
}
}
</script>