（一分钟搞懂）纯前端导出excel——Vue-json-excel

这个很简单的，很方便。看过很多文章都是偏复杂的，代码量多不易维护，兼容性还未知。

安装vue-json-excel插件

npm install vue-json-excel --save

引入vue-json-excel组件

明明就能局部引入，那么多文章带偏新人让人家全局引入（main.js）？

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

上代码

因为是组件形式，命名就可以像我们平常命子组件一样。点击这个标签就直接导出下载了，所以你可以在里面写p标签、el-button、img标签都可以。

 <download-excel
            :fields="jsonFields"      //重名命的，往下看就懂了
            :data="mytable"           //要导出的数据
            title="这是表格内的标题"
            name='这是下载的文件名'
            :before-generate="startDownload"
            :before-finish="finishDownload"
            worksheet="这是表格下面sheet"
            type="xls">
            <p>导出</p>
 </download-excel>
 data() {
    
    
        return {
    
    
            mytable:[
                {
    
    name:'来',ssff:'了'},
                {
    
    name:'来ba',ssff:'了sf'},
                {
    
    name:'来s',ssff:'123了'},
            ],
            jsonFields: {
    
                //重命名
                '姓名':'name',
                '其他':'ssff'
            }
        }
    },
    
		startDownload() {
    
    
            console.log('导出前')
        },
        finishDownload() {
    
    
            this.$message.success('导出成功')
        }

效果图