vue - vue-json-excel

使用方法

1. npm 安裝依賴

npm install vue-json-excel

2. 項目主文件入口main.js全局引入

//excel
import JsonExcel from 'vue-json-excel'
Vue.component('downloadExcel', JsonExcel)

3. 直接在項目中使用

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{
        json_fields: {
            'Complete name': 'name',
            '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': '[phone]'
                }
            },
            {
                'name': 'Thessaloniki',
                'city': 'Athens',
                'country': 'Greece',
                'birthdate': '1987-11-23',
                'phone': {
                    'mobile': '[phone]',
                    '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>