vue 前端导出Excel

下载之后的excel.jpeg
点击进去的显示.jpeg

使用的是组件js-export-excel，是一个纯 js 导出 excel的方式

第一步：在使用的项目中安装该组件

npm install js-export-excel
yarn add js-export-excel

第二步：在需要使用的地方引入该组件

import ExportJsonExcel from 'js-export-excel';

第三步：使用

<template>
   <div>
       <el-button type="primary" @click="download">
           Export to Excel
       </el-button>
       <el-table :data="tableData" style="width: 100%">
           <el-table-column prop="name" label="姓名"/>
           <el-table-column prop="class" label="班级"/>
           <el-table-column prop="achievement" label="成绩"/>
       </el-table>
   </div>
</template>

<script>
import ExportJsonExcel from 'js-export-excel';
export default {
    data() {
        return {
            tableData: [{
                name: '陈卓',
                class: '一年级',
                achievement: '98'
            },{
                name: '张珂',
                class: '一年级',
                achievement: '89'
            },{
                name: '刘欣欣',
                class: '一年级',
                achievement: '88'
            }]
        };
    },
    methods: {
        download () {
            let tableExcel = [];
            this.tableData.map(item => {
               tableExcel.push({
                    '姓名': item.name,
                    '班级': item.class,
                    '成绩': item.achievement
                })
            })
            this.exportToExcel(tableExcel);
            console.log(tableExcel)
        },
        exportToExcel (tableExcel) {
            let option = {};
            option.fileName = "学生成绩单";
            option.datas = [
                {
                    sheetData: tableExcel,
                    sheetName: "一年级学生成绩单",
                    sheetFilter: [
                        '姓名',
                        '班级',
                        '成绩'
                    ],
                    sheetHeader: [
                        '姓名',
                        '班级',
                        '成绩'
                    ]
                }
            ];
           var toExcel = new ExportJsonExcel(option);
            toExcel.saveExcel();
        }

    }
};
</script>

解释说明：
fileName：excel对应的名字
sheetName：进入excel中左下标的名字