(Understand in one minute) Pure front-end export excel——Vue-json-excel

This is very simple and very convenient. I have read many articles that are a bit complicated, the amount of code is not easy to maintain, and the compatibility is not yet known.

Install the vue-json-excel plugin

npm install vue-json-excel --save

Introduce the vue-json-excel component

Obviously it can be introduced locally, so many articles bring newcomers to let people introduce globally (main.js)?

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

Upload code

Because it is in the form of components, the naming can be like our usual sub-components. 点击这个标签就直接导出下载了, So you can write p tag, el-button, img tag in it.

 <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('导出成功')
        }

Effect picture