[JavaScript知识库]vue+vue-json-excel实现前端导出excel数据

1. npm安装依赖

npm install vue-json-excel

3. 在需要的使用的组件中引入，也可以在main.js文件中全局引入

import JsonExcel from "../../node_modules/vue-json-excel";
//注册组件
    components: {
        JsonExcel,
    },

5. 在项目如何使用

//有数据,无需点击时获取 必需 data ,fields 属性
 <JsonExcel :data="json_data" :fields="json_fields" name="filename.xls" >
     <el-button type="warning">导出excel</el-button>
 </JsonExcel>
 
<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': '(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属性)

 <JsonExcel :fetch= "fetchData" :fields="json_fields" :before-generate = "startDownload" :before-finish = "finishDownload"  name="filename.xls"  >
     <el-button type="warning">导出excel</el-button>
 </JsonExcel>
 
<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>

注意事项：在无数据的情况下，点击按钮时，使用 data ,fields 属性，会出现第一次点击失败，获取不到数据，第二次点击之后数据获取成功，这种原因可能就是第二次点击时，是第一次点击获取到的数据已经存在了，那么第二次点击拿到的数据就是第一次点击时请求得到的，跟data中数据初始化时已经有了数据是同样的原理。