sheetjs前段操作excel,点击合并拆分表格增删行列功能实现

         sheetjs的js-xlsx插件是专门为web前段处理excel表格开发的一款开源插件，插件的github地址是https://github.com/sheetjs/js-xlsx官网地址http://sheetjs.com/,它提供了excel表格的导入导出功能，为前段显示修改excel表格提供了可能，但是毕竟只是一个插件，无法实现excel的全部功能，比如表格的合并拆分这些基础的功能，这些都需要开发者自己来实现，本文将介绍如何用纯js实现excel表格的合并拆分表格以及动态插入删除行列。

0，基础知识

          js-xlsx导入excel表格的时候会生成一个sheet对象，这个对象包含了一个表格的具体数据，包括范围，合并的单元格，各单元格数据，基本样式等等，如下图：

其中"!ref"表示显示的范围，从A1到J35。"!merges"表示那些合并的单元格项，具体数据格式如下：

其中s表示开始单元格的坐标，c是列坐标，r是行坐标，都是从0开始，e表示结束单元格的坐标，我们通过修改这些数据完成单元格的合并与拆分。

var row_count = 0;
var colums_count = 0;
function refreshFromSheet() {

        var html = XLSX.utils.sheet_to_html(worksheet);
        document.getElementById('result').innerHTML = html;
        var ref = worksheet["!ref"];
        var s_e = ref.split(":");
        row_count = getRowFromId(s_e[1])+1;
        colums_count = getIndexFromId(s_e[1])+1;
        $("table tr:first-child td:first-child").css("font-size", 25);
        $("table tr td").css("text-align", "center");

    }
function readWorkbook(workbook) {
        var sheetNames = workbook.SheetNames; // 工作表名称集合
        worksheet = workbook.Sheets[sheetNames[0]]; // 这里我们只读取第一张sheet
        refreshFromSheet();
｝

1，合并单元格

         我们要实现的是鼠标点击两个单元格，就合并两个单元格间的所有表格为一个，我们记录下两次点击选择的表格id，转为坐标，然后加入到shheet对象里，最后重新渲染下界面：

    var selected_split_grid_id = "";//选中的要拆分的单元格id
    var selected_grid_id = "";
    var selected_merge_grid_s = {};//要合并的开始单元格
    var selected_merge_grid_e = {};//要合并的结束单元格
    var selected_merge_grid_sid = "";//要合并的开始单元格id
    var selectedType = -1;// 0是选中工艺状态用于拆分，
    // 1是参数行选中状态用于编辑
    // 2是合并模式
    // 3是插入行
    // 4是插入列
    // 5是插入列
    // 6是插入列+
function mergeGrid() {

        if (selectedType == 2) {
            resetType()
        } else {
            selectedType = 2;
            $("#label").text("合并模式");
        }
        clearType();
    }
function resetType() {
        selectedType = -1;
        $("#label").text("编辑模式");
    }
function clearType() {
        if (selected_merge_grid_sid)
            $("#" + selected_merge_grid_sid).css("background", "#EEEEEE");
        if (grid_selected) {
            $("#" + selected_grid_id).css("background", "#eeeeee");
            grid_selected = false
        }
        selected_merge_grid_s = {};
        selected_merge_grid_e = {};
    }
var letters = [
        'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z',
        'AA', 'AB', 'AC', 'AD', 'AE', 'AF', 'AG', 'AH', 'AI', 'AJ', 'AK', 'AL', 'AM', 'AN', 'AO', 'AP', 'AQ', 'AR', 'AS', 'AT', 'AU', 'AV', 'AW', 'AX', 'AY', 'AZ'
    ];

    function getIndexFromId(str) {
        var reg = /([A-Z]+)/g;
        var result = reg.exec(str);
        return letters.indexOf(result[0]);
    }

    function getRowFromId(str) {
        var reg = /(\d+)/g;
        var result = reg.exec(str);
        return parseInt(result[0]) - 1;
    }
$("#result").on("tap", "table tbody tr td", function () {

                if (selectedType == 2) {//点击选择合并单元格
                    var colums = getIndexFromId($(this).attr("id"));
                    var row = getRowFromId($(this).attr("id"));
                    if (JSON.stringify(selected_merge_grid_s) == "{}") {
                        //选择合并的开始
                        selected_merge_grid_sid = $(this).attr("id");
                        selected_merge_grid_s.r = row;
                        selected_merge_grid_s.c = colums;
                        $(this).css("background", "#007aff");
                    } else {
                        //选择合并的结尾然后合并
                        selected_merge_grid_e.r = row;
                        selected_merge_grid_e.c = colums;
                        if (selected_merge_grid_s.r == selected_merge_grid_e.r && selected_merge_grid_s.c == selected_merge_grid_e.c) {
                            //如果第二次选择的单元格和第一次相同则取消第一次的选择
                            selected_merge_grid_s = {};
                            selected_merge_grid_e = {};
                            $("#" + selected_merge_grid_sid).css("background", "#EEEEEE");
                        } else
                        // if (selected_merge_grid_s.r == selected_merge_grid_e.r || selected_merge_grid_s.c == selected_merge_grid_e.c)
                        {
                            //如果后点在前点店面则交换两点位置信息
                            if (selected_merge_grid_s.r >= selected_merge_grid_e.r && selected_merge_grid_s.c >= selected_merge_grid_e.c) {
                                var tmpc = selected_merge_grid_s.c;
                                selected_merge_grid_s.c = selected_merge_grid_e.c;
                                selected_merge_grid_e.c = tmpc;
                                var tmpr = selected_merge_grid_s.r;
                                selected_merge_grid_s.r = selected_merge_grid_e.r;
                                selected_merge_grid_e.r = tmpr;
                            }


                            var table = document.getElementsByTagName("table")[0];
                            var sheet = XLSX.utils.table_to_sheet(table);
                            if (!sheet["!merges"]) sheet["!merges"] = [];
                            var merges = sheet["!merges"];
                            var merged = false;
                            //考虑到第一次选择的单元格可能是已合并的单元格，遍历已合并列表把新合并数据替换进去
                            if (merges) {
                                for (var i = 0; i < merges.length; i++) {
                                    var merge_s = merges[i].s;
                                    if (merge_s.c == selected_merge_grid_s.c && merge_s.r == selected_merge_grid_s.r) {
                                        merges[i].e = selected_merge_grid_e;
                                        merged = true;
                                    }
                                    if (merge_s.c == selected_merge_grid_e.c && merge_s.r == selected_merge_grid_e.r) {
                                        merges[i].s = selected_merge_grid_s;
                                        merged = true;
                                    }
                                }
                            } else {
                                merges = [];
                            }
                            //如果不是已合并单元格，就直接push进去
                            if (!merged) {
                                sheet["!merges"].push({
                                    "s": selected_merge_grid_s,
                                    "e": selected_merge_grid_e
                                });
                            }
                            worksheet = sheet;
                            refreshFromSheet();//刷新界面
                            selected_merge_grid_s = {};
                            selected_merge_grid_e = {};
                        }

                    }
                }
})

 

2，拆分单元格

       拆分单元格也是同理，根据点击选择的id，转为坐标然后遍历"!merges"数组，删除匹配的项目就完成已合并表格的删除

function splitGrid() {
        if (selectedType == 0) {
            resetType()
        } else {
            selectedType = 0;
            clearType();
            $("#label").text("拆分模式");
        }
    }
$("#result").on("tap", "table tbody tr td", function () {

                if (selectedType == 0) {//点击选择拆分单元格
                    if (selected_split_grid_id)
                        $("#" + selected_split_grid_id).css("background", "#eeeeee");

                    selected_split_grid_id = "";
                    var colums = getIndexFromId($(this).attr("id"));
                    var row = getRowFromId($(this).attr("id"));
                    var merges = worksheet["!merges"];
                    if (!merges) {
                        return;
                    }
                    var table = document.getElementsByTagName("table")[0];
                    var sheet = XLSX.utils.table_to_sheet(table);
                    var changed = false;
                    for (var j = 0; j < merges.length; j++) {
                        var srcmerge = sheet["!merges"][j];
                        if (srcmerge.s.c == colums && srcmerge.s.r == row) {
                            sheet["!merges"].splice(j, 1);
                            changed = true;
                            break;
                        }
                    }
                    if (changed) {
                        worksheet = sheet;
                        refreshFromSheet();
                        resetType();
                    }
                }
})

3，插入删除行和列

        首先扩展航和列，直接操作"!ref"字段，然后把所选中行列之后的数据全部后移

function insertRow() {

        if (selectedType == 3) {
            resetType()
        } else {
            selectedType = 3;
            $("#label").text("插入行模式，点击要插入的行");
        }
    }

    function insertRowReal(row) {
        var table = document.getElementsByTagName("table")[0];
        var sheet = XLSX.utils.table_to_sheet(table);
        sheet["!ref"] = "A1:" + letters[colums_count-1] + String(row_count + 1);
        for (var i = row_count; i >= row + 1; i--) {
            for (var j = 0; j <= colums_count-1; j++) {
                sheet[letters[j] + (i + 1)] = sheet[letters[j] + (i)];
            }
        }
        var merges = sheet["!merges"];
        var tomerge = [];
        if (merges) {
            for (var i = 0; i < merges.length; i++) {
                var s = merges[i].s;
                var e = merges[i].e;
                if (s.r == e.r && s.r == row) {
                    tomerge.push({s: {c: s.c, r: s.r}, e: {c: e.c, r: e.r}});
                    e.r = e.r + 1;
                    s.r = s.r + 1;
                } else {
                    if (e.r >= row) {
                        e.r = e.r + 1;
                    }
                    if (s.r > row) {
                        s.r = s.r + 1;
                    }
                }
            }
            for (var i = 0; i < tomerge.length; i++) {
                merges.push(tomerge[i]);
            }
        }
        worksheet = sheet;
        refreshFromSheet();
        resetType();
        generatexuhao();
    }

    function deleteRowReal(row) {
        var table = document.getElementsByTagName("table")[0];
        var sheet = XLSX.utils.table_to_sheet(table);
        sheet["!ref"] = "A1:" + letters[colums_count-1] + String(row_count - 1);
        for (var i = row + 1; i <= row_count; i++) {
            for (var j = 0; j <= colums_count-1; j++) {
                sheet[letters[j] + (i)] = sheet[letters[j] + (i + 1)];
            }
        }
        var merges = sheet["!merges"];
        var tomerge = [];
        if (merges) {
            for (var i = 0; i < merges.length; i++) {
                var s = merges[i].s;
                var e = merges[i].e;
                if (s.r == e.r && s.r == row) {
                    tomerge.push(i)
                } else {
                    if (e.r >= row) {
                        e.r = e.r - 1;
                    }
                    if (s.r > row) {
                        s.r = s.r - 1;
                    }
                }
            }
            for (var i = 0; i < tomerge.length; i++) {
                sheet["!merges"].splice(tomerge[i], 1);
            }
        }
        worksheet = sheet;
        refreshFromSheet();
        resetType();
        generatexuhao();

    }
function insertColums() {
        if (selectedType == 4) {
            resetType()
        } else {
            selectedType = 4;
            $("#label").text("插入列模式，点击要插入的列");
        }
    }

    function deleteRow() {
        if (selectedType == 5) {
            resetType()
        } else {
            selectedType = 5;
            $("#label").text("删除行模式，点击要删除的行");
        }
    }

    function deleteColums() {
        if (selectedType == 6) {
            resetType()
        } else {
            selectedType = 6;
            $("#label").text("删除列模式，点击要删除的列");
        }
    }

    function insertColumsReal(colums) {
        var table = document.getElementsByTagName("table")[0];
        var sheet = XLSX.utils.table_to_sheet(table);
        sheet["!ref"] = "A1:" + letters[colums_count ] + String(row_count);
        for (var i = colums_count ; i >= colums; i--) {
            for (var j = 0; j <= row_count; j++) {
                sheet[letters[i + 1] + (j)] = sheet[letters[i] + (j)];
            }
        }
        var merges = sheet["!merges"];
        var tomerge = [];
        if (merges) {
            for (var i = 0; i < merges.length; i++) {
                var s = merges[i].s;
                var e = merges[i].e;
                if (s.c == e.c && s.c == colums) {
                    tomerge.push({s: {c: s.c, r: s.r}, e: {c: e.c, r: e.r}});
                    e.c = e.c + 1;
                    s.c = s.c + 1;
                } else {
                    if (e.c >= colums) {
                        e.c = e.c + 1;
                    }
                    if (s.c > colums) {
                        s.c = s.c + 1;
                    }
                }
            }
            for (var i = 0; i < tomerge.length; i++) {
                merges.push(tomerge[i]);
            }
        }
        worksheet = sheet;
        refreshFromSheet();
        resetType();
    }

    function deleteColumsReal(colums) {
        var table = document.getElementsByTagName("table")[0];
        var sheet = XLSX.utils.table_to_sheet(table);
        sheet["!ref"] = "A1:" + letters[colums_count - 2] + String(row_count);
        for (var i = colums; i < colums_count-1; i++) {
            for (var j = 0; j <= row_count; j++) {
                sheet[letters[i] + (j)] = sheet[letters[i + 1] + (j)];
            }
        }
        var merges = sheet["!merges"];
        var tomerge = [];
        if (merges) {
            for (var i = 0; i < merges.length; i++) {
                var s = merges[i].s;
                var e = merges[i].e;
                if (s.c == e.c && s.c == colums) {
                    tomerge.push(i);

                } else {
                    if (e.c >= colums) {
                        e.c = e.c - 1;
                    }
                    if (s.c > colums) {
                        s.c = s.c - 1;
                    }
                }
            }
            for (var i = 0; i < tomerge.length; i++) {
                sheet["!merges"].splice(tomerge[i], 1);
            }
        }
        worksheet = sheet;
        refreshFromSheet();
        resetType();
    }
 $("#result").on("tap", "table tbody tr td", function () {
if (selectedType == 3) {
                    var row = getRowFromId($(this).attr("id"));
                    insertRowReal(row);
                } else if (selectedType == 4) {
                    var colums = getIndexFromId($(this).attr("id"));
                    insertColumsReal(colums);
                } else if (selectedType == 5) {
                    var row = getRowFromId($(this).attr("id"));
                    deleteRowReal(row);
                } else if (selectedType == 6) {
                    var colums = getIndexFromId($(this).attr("id"));
                    deleteColumsReal(colums);
                } 
})

excel导入到web前端然后导出到后台的话会丢失大量样式，我们可以在后端操作excel(java有相关类库)，把前段返回的excel表格里的数据填入原excel文件里，这样即保留原文件的样式又获得了前端返回的数据。