Vue 实战-5 批量导出 excel功能

需求，需要一键导出，但是这个有点low，即不能自定义，即我只想导出我想要的数据而不是全部怎么办？

 

参考连接：https://blog.csdn.net/qq_42616672/article/details/108803898

 

先总结如下：

    1.需要安装依赖：file-saver  xlsx  script-loader

        命令：cnpm/ npm install  -S  file-saver

                    cnpm/npm install  -S  xlsx

                    cnpm/npm install  -D  script-loader

 

    2.需要导入两个js文件，前提在src目录下新建一个文件夹Excel(可以随意，但是推荐是这个便于管理)

        Blob.js 和 Export2Excel.js 把这两个js文件放入Excel文件夹中；

        

    3.在main.js中引入

        import  Blob  from  './Excel/Blob.js'

        import  Export2Excel  from  './Excel/Export2Excel.js'

 

    4.组件中使用

        第一：写一个button绑定点击事件ExportToExcel

 

        第二：写一绑定好的方法

        代码：

            ExportToExcel () {  

                // let wb = XLSX.utils.table_to_book(document.querySelector('#table_data'));   // 这里就是表格   

                // let wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' });   

                // try {   

                //   FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), 'test.xlsx');  //test是自己导出文件时的命名，随意   

                // } catch (e)   

                // {  

                //   if (typeof console !== 'undefined')   

                //     console.log(e, wbout)   

                // }   

                // return wbout   

                上面注释的代码可以实现导出当前页面所有数据，但是没办法满足需求，故有下面的代码：

                require.ensure([], () => {     

                    const { export_json_to_excel } = require('../Excel/Export2Excel');//注意这个Export2Excel路径     

                    const tHeader = ['域名', '负责人', '集群', '是否分享域名'];   // 上面设置Excel的表格第一行的标题     

                    const filterVal = ['uniq_domain', 'owner', 'cluster', 'is_share']; // 上面的index、nickName、name是tableData里对象的属性key值     

                    const list = this.multipleSelection;  //把要导出的数据tableData存到list     

                    const data = this.formatJson(filterVal, list);     

                    export_json_to_excel(tHeader, data, 'test_guos');//最后一个是表名字   

                }) 

            }, 

            formatJson(filterVal, jsonData) {    // 这个是上一个方法需要调用的

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

            },