vue-element-admin table表格导出(含踩坑)

步骤一：安装插件

npm install xlsx file-saver -S

npm install script-loader -S -D

步骤二：在src新建目录vendor

在vendor新建文件Export2Excel.js

然后将链接中的代码复制到Export2Excel.js

https://github.com/PanJiaChen/vue-element-admin/edit/master/src/vendor/Export2Excel.js

注意：作者用的import 导入，在我的项目中打印XLSX一直是undefined，所以我用了下面的方式

import { saveAs } from 'file-saver'

// import XLSX from 'xlsx' 

const XLSX = require('xlsx');

 

步骤三：在vue中使用

 

methods: {

    exporfFile(){

        import('@/vendor/Export2Excel').then(excel => {

            // 导出的表头名信息，也就是选中列

            const tHeader = [

                '序号',

                '企业名称',

                '区县',

                '管理类别',

                '行业类别',

                '申请类型',

                '开始时间',

                '结束时间',

                '时长',

            ]

            // 导出的表头字段名，需要导出表格字段名

            const filterVal = [

                'index',

                'devcompany',

                'name_regiondetail',

                'management',

                'hyname',

                'itemtype',

                'start_time',

                'end_time',

                'time',

            ]

            //导出时如果需要序列，增加序列。

            this.tableData1.forEach((item, index) => {

                item.index = index + 1

            })

            const list = this.tableData1

            const data = this.formatJson(filterVal, list)

            excel.export_json_to_excel({

                header: tHeader, //表头 必填

                data, //具体数据 必填,字段名必须用data

                filename: 'excel-list', //非必填，自定义

                autoWidth: true, //非必填

                bookType: 'xlsx' //非必填

            })

        })

    },

    //处理数据格式将[{}……]处理为@/vendor/Export2Excel需要的[[]……]格式

    formatJson(filterVal, jsonData) {

        return jsonData.map((v) => filterVal.map((j) => v[j]))

    },

}

 

 

 

注意：数组的格式为数组套数组，且tHeader 元素的数量要和data中列的数量一致，且传递时注意，上面对象中橙色的属性data，一定要用'data'这个字段名，否则传递过去是undefined。

 

data的格式如下：

[

[1, '标题一 'George',111]

[2, '标题二', 'John', 2614,]

[3, '标题三', 'Jennifer', 4787, ]

]