前端vue通过XLSX实现导出表格，并将数据去重合并

前端vue通过XLSX实现导出表格，并将数据去重合并

1.安装依赖

npm install xlsx --save 
npm install xlsx-style --save

*此时可能会有引入错误问题：

This relative module was not found: ./cptable in ./node_modules/xlsx-style@0.8.13@xlsx-style/dist/cpexcel.js

~解决方案：

//在\node_modules\xlsx-style\dist\cpexcel.js 807行
// 的var cpt = require('./cpt' + 'able');
// 更改为var cpt = cptable; 即可

2.引入

import XLSX from 'xlsx' 
   import XLSXStyle from 'xlsx-style' //引入样式

3.js部分代码
3.1简易实现前端导出，不具备更改表格样式功能

：：实现数组去重

let array = [{school:'ad',name:'q',age:'1q',title:'一样',local:'d'},
                {school:'za',name:'w',age:'x',title:'x',local:'1x'},
                {school:'sa',name:'q',age:'1q',title:'一样',local:'d'},
                {school:'zw',name:'q',age:'1q',title:'二样',local:'d'},
                {school:'za',name:'q',age:'wq',title:'二样',local:'d'},
                {school:'sa',name:'q',age:'wq',title:'二样',local:'c'},
                {school:'sr',name:'w',age:'x',title:'x',local:'1x'}]

               //标记被合并行的数量
                array.forEach(item=>{
                   item.count = 1
                })

                //  该部分实现数组的去重合并功能
                
                // array数组通过reduce()方法中的每个值（从左到右）开始缩减，最终计算为一个值。
                //  result：函数传进来的初始值或上一次回调的返回值
                //  obj：数组中当前处理的元素值
                var mergedArray = array.reduce(function(result, obj) {
                    // target:  result数组种查找到第一个 与obj相同的对象
                    var target = result.find(function(item) {
                        if(item.age === obj.age && item.title === obj.title){
                            return item.name === obj.name;
                        }
                    });
                
                    if (target) {
                        obj.count = target.count+1 
                        Object.assign(target, obj)
                          //值从obj复制到target
                    } else {
                        result.push(obj);
                    }

                    return result;
                }, []);  //[]设置result默认未[]
                
                console.log('原本的数据array',array);
                console.log('对比得到的数据mergedArray',mergedArray);

                mergedArray.sort(  
                    function(a, b) {
                    return (a.school + '').localeCompare(b.school + '')
                }  
                )

                console.log('对比得到的数据 进行排序 mergedArray',mergedArray);

：：实现导出数组

const headers = ['序号','日期','名称, '描述', '状态']
const data = this.arry.map((item,index) => [index+1,item.time,item.name, item.descripte, item.state])
   
                const worksheet = XLSX.utils.aoa_to_sheet([headers, ...data])
                const workbook = XLSX.utils.book_new()
                XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1')
                var nowData = new Date().getTime()
                XLSX.writeFile(workbook, `到期返还${nowData}.xlsx`)

3.2复杂实现前端导出，完善可更改表格样式功能

//arry是要导出的对象数组
const headers = ['序号','日期','名称, '描述', '状态']
const data = this.arry.map((item,index) => [index+1,item.time,item.name, item.descripte, item.state])
                
                //处理格式
                data.unshift(headers)
                var sheet = XLSX.utils.json_to_sheet(data, {
                    skipHeader: true,
                });
                var sheet1 = this.tableSheetStyle(sheet)
                var nowData = new Date().getTime()
                var tableTileName = `导出表格名称${nowData}.xlsx`
                this.openDownload(this.sheet2blob(sheet1, 'sheet1'), tableTileName);
            },

            //设置表格样式
            tableSheetStyle(sheet){
                for (const key in sheet) {
                    // 所有单元格居中
                    if (key.indexOf("!") === -1 && sheet[key].v) {
                    sheet[key].s = {
                        alignment: {
                        horizontal: "center",
                        vertical: 'center',
                        wrap_text: true,
                        }
                    }
                    }
                    
                    // 表头加颜色加边框
                    if (key.replace(/[^0-9]/ig, '') === '1') {
                    sheet[key].s = {
                        fill: { //背景色
                        fgColor: { rgb: 'C0C0C0' }
                        },
                        font: {//字体
                        name: '宋体',
                        sz: 12,
                        // bold: true
                        },
                        border: {//边框
                        bottom: {
                            style: 'thin',
                            color: 'FF000000'
                        },
                        top: {
                            style: 'thin',
                        },
                        left: {
                            style: 'thin',
                        },
                        right: {
                            style: 'thin',
                        },
                        },
                        alignment: {
                        horizontal: 'center' //水平居中
                        }
                    }
                    }
                    // 总共就这么多列，一个个设置的列宽
                    sheet['!cols'] = [{ wch: 6 }, { wch: 24 },{ wch: 20 } , { wch: 18 }, { wch: 10 },];//列宽
                }

                return sheet

            },

            // 处理excle文件
            sheet2blob(sheet, sheetName) {
                console.log('查看sheet1',sheetName)
                let wb = XLSX.utils.book_new();//工作簿对象包含一SheetNames数组，以及一个表对象映射表名称到表对象。
                wb.SheetNames.push(sheetName)  
                wb.Sheets[sheetName] = sheet;
                var wbout = XLSXStyle.write(wb, { bookType: '', bookSST: false, type: 'binary' })
                var blob = new Blob([s2ab(wbout)], { type: "" }, sheetName);
                // 字符串转ArrayBuffer
                function s2ab(s) {
                    var buf = new ArrayBuffer(s.length);
                    var view = new Uint8Array(buf);
                    for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xff;
                    return buf;
                }
                return blob;
            },
            
            // 下载excle文件
            openDownload(url, saveName) {
                if (typeof url == "object" && url instanceof Blob) {
                    url = URL.createObjectURL(url); // 创建blob地址
                }
                var aLink = document.createElement("a");
                aLink.href = url;
                aLink.download = saveName || ""; // HTML5新增的属性，指定保存文件名，可以不要后缀，注意，file:///    模式下不会生效
                var event;
                if (window.MouseEvent) event = new MouseEvent("click");
                else {
                    event = document.createEvent("MouseEvents");
                    event.initMouseEvent(
                    "click",
                    true,
                    false,
                    window,
                    0,
                    0,
                    0,
                    0,
                    0,
                    false,
                    false,
                    false,
                    false,
                    0,
                    null
                    );
                }
                aLink.dispatchEvent(event);
            },