VueCli4.0项目中将Elment UI表格内的数据导出为Excel文件

第一步、

首先安装三个依赖

npm install -S file-saver xlsx
npm install -D script-loader

或者：

yarn add file-saver
yarn add xlsx
yarn add script-loader --dev

第二步、

引入两个js文件

在src目录下新建excel文件夹，里面放入Blob.js和Export2Excel.js两个JS文件

链接1: https://pan.baidu.com/s/1iqyQAwYZqxxFtLIeOnzAag 提取码: upxq 
链接2: https://pan.baidu.com/s/1IHOgPrKC_NIKaBvLngwvMw 提取码: 76yv

下载后放到src下面的文件夹下：

第三步、

在main.js引入这两个文件(路径取决你们的路径)

第四步、

正确设置路径

打开Export2Excel.js文件，设置里面的路径，正确引入Blob.js

 现在回到你要用导出功能的组件里，在data里放入tableData变量，这个是存放你表格里的数据，类型为数组，里面存放对象，表格的每一行为一个对象，存入tableData。

举个列子:

如果你的每一行是这样子

那么data里的tableData就是这样子(切记，你的表格有多少行内容，tableData里就存多少个对象,对象属性不用变，改变值即可)

 

 第五步、

接下来在methods里写入两个方法，如下:
哪个按钮是导出功能，就调用export2Excel()方法：

export2Excel() {
　require.ensure([], () => {
　　　const { export_json_to_excel } = require('../../vendor/Export2Excel');
　　　const tHeader = ['序号', '帐号', '院校'];
　　　// 上面设置Excel的表格第一行的标题
　　　const filterVal = ['index', 'phone_Num', 'school_Name'];
　　　// 上面的index、phone_Num、school_Name是tableData里对象的属性
　　　const list = this.tableData;  //把data里的tableData存到list
　　　const data = this.formatJson(filterVal, list);
　　　export_json_to_excel(tHeader, data, '列表excel');
　　})
　　},
　　formatJson(filterVal, jsonData) {
     return jsonData.map(v => filterVal.map(j => v[j]))
   }

 注意上面的方法也有个路径问题，要自己修改：

第六步、完整代码如下：

<template>
    <div>
        <el-row :gutter="24" style="margin-bottom:20px;">
            <el-col :span="24" class="text-right">
                <!--给按钮绑定事件-->
                <el-button type="primary" @click="exportExcel">点击导出</el-button>
            </el-col>
        </el-row>
        <!-- 表格导出1 -->
        <!--给表格添加一个id，导出文件事件需要使用-->
        <el-row :gutter="24" style="margin-bottom:20px;">
            <el-table :data="historyData" border style="width: 100%" id="out-table">
                <el-table-column type="index" label="序号" width="60"></el-table-column>
                <el-table-column prop="date" label="日期" width="150"></el-table-column>
                <el-table-column prop="name" label="姓名" width="150"></el-table-column>
                <el-table-column prop="province" label="省份" width="150"></el-table-column>
                <el-table-column prop="city" label="市区" width="150"></el-table-column>
                <el-table-column prop="address" label="地址"></el-table-column>
                <el-table-column prop="zip" label="邮编" width="150"></el-table-column>
                <el-table-column label="操作" width="200">
                <template slot-scope="scope">
                    <el-button type="primary" @click="handleClick(scope.row)" size="small">查看</el-button>
                    <el-button type="primary" size="small">编辑</el-button>
                </template>
                </el-table-column>
            </el-table>
        </el-row>
    </div>
</template>

<script>
    // 引入导出Excel表格依赖
    import FileSaver from "file-saver";
    import XLSX from "xlsx";
    export default {
    data() {
        return {
            // 导出一、
            historyData: [
            {
                date: '2016-05-02',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1518 弄',
                zip: 200333
            }, {
                date: '2016-05-04',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1517 弄',
                zip: 200333
            }, {
                date: '2016-05-01',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1519 弄',
                zip: 200333
            }, {
                date: '2016-05-03',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1516 弄',
                zip: 200333
            }],
            excelData:[],
        };
    },
    mounted() {
    },
    methods: {
        //定义导出Excel表格事件
        exportExcel() {
            /* 从表生成工作簿对象 */
            // var wb = XLSX.utils.table_to_book(document.querySelector("#out-table"));
            // /* 获取二进制字符串作为输出 */
            // var wbout = XLSX.write(wb, {
            //     bookType: "xlsx",
            //     bookSST: true,
            //     type: "array"
            // });
            // try {
            //     FileSaver.saveAs(
            //         //Blob 对象表示一个不可变、原始数据的类文件对象。
            //         //Blob 表示的不一定是JavaScript原生格式的数据。
            //         //File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
            //         //返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
            //         new Blob([wbout], { type: "application/octet-stream" }),
            //         //设置导出文件名称
            //         "导出表格.xlsx"
            //     );
            //     console.log("wbout:", wbout);
            // } catch (e) {
            //     if (typeof console !== "undefined") 
            //     console.log(e, wbout);
            // }
            // return wbout;
            this.$confirm('确定下载列表文件?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.excelData = this.historyData //你要导出的数据list。
                this.export2Excel();
            }).catch(() => {});
        },
        export2Excel() {
            var that = this;
            require.ensure([], () => {
                const { export_json_to_excel } = require('../../../excel/Export2Excel'); //这里必须使用绝对路径，使用@/+存放export2Excel的路径
                const tHeader = ['date','name','province','city','address','zip']; // 导出的表头名信息
                const filterVal = ['date','name','province','city','address','zip']; // 导出的表头字段名，需要导出表格字段名
                const list = that.excelData;
                const data = that.formatJson(filterVal, list);
                export_json_to_excel(tHeader, data, '下载数据excel');// 导出的表格名称，根据需要自己命名
            })
        },
        formatJson(filterVal, jsonData) {
          return jsonData.map(v => filterVal.map(j => v[j]))
        },
        //查看
        handleClick(row) {
            console.log(row);
        },
    }
};
</script>

<style>
</style>

第七步、导出的结果如下： 

 

 

 第八步、注意事项：

报错提示如下：

查了很多资料最后终于找到了：

因为 Export2Excel.js 里面 Blob.js的路径引入的不正确；请看下图：

正确的路径如下：

 

 没有报错了；

最后为了方便大家的沟通与交流请加QQ群： 625787746

请进QQ群交流：【IT博客技术分享群①】：https://jq.qq.com/?_wv=1027&k=DceI0140