（1分で理解できます）純粋なフロントエンドのエクスポート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('导出成功')
        }

エフェクト画像