SheetJS導出導入Excel

概述

SheetJS用於讀寫各種電子表格，免費版不支持樣式調整。

官方說明文檔：https://github.com/SheetJS/sheetjs

xlsx-style基於SheetJS二次開發，使其支持樣式調整，但其開發停留在2017年，所基於的SheetJS版本老舊，缺失許多后續新增方法。

官方說明文檔：https://github.com/protobi/js-xlsx

這兩者默認文件名都為xlsx.core.min.js和xlsx.full.min.js，一般使用xlsx.core.min.js即可；

SheetJS所暴露出來的對象在最后一個語句， var XLS=XLSX,ODS=XLSX; 分別為XLS,XLSX,ODS；

xlsx-style所暴露出來的對象在最后一個語句， var XLS=XLSX; 分別為XLS,XLSX；

由於兩者所暴露出來的對象一樣（都是XLS和XLSX），同時引用時會覆蓋掉另一個，故要將xlsx-style所暴露的對象改為xlsxStyle，參考這個項目https://github.com/Ctrl-Ling/XLSX-Style-Utils；所暴露出來的對象在最后一個語句， var XLS = xlsxStyle; 分別為XLS,xlsxStyle；使用SheetJS功能時用XLSX對象，使用xlsx-style功能時用xlsxStyle對象；

導出

 項目采用異步提交后返回json，回調處理生成並下載Excel，其中sdata為導出字段信息，包括字段名稱、字段描述、是否合並，合並是指一列中相鄰單元格內容一樣；

xhr.onload = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        //傳入參數
        var sdata = this.sdata;
        //接收響應數據
        var content = this.response;
        //解析為json格式
        //var jsonStuExt = JSON.parse(content);
        var jsonStuExt = content;

        //刪除無用列
        for (var i = 0,
        ilen = jsonStuExt.length; i < ilen; i++) {
            var json = {};
            for (var j = 0,
            jlen = sdata.length; j < jlen; j++) {
                json[sdata[j].field] = jsonStuExt[i][sdata[j].field];
                //日期格式轉換，2020-04-12
                if (/Date\((-?\d+)\)/.test(json[sdata[j].field])) {
                    json[sdata[j].field] = getFDate(json[sdata[j].field]);
                }
            }
            jsonStuExt[i] = json;
        }

        //添加空行，2020-04-08
        jsonStuExt.unshift({});
        //轉為工作表
        var sheet = XLSX.utils.json_to_sheet(jsonStuExt);

        //獲取行列數
        var range = XLSX.utils.decode_range(sheet['!ref']);
        var ncols = range.e.c - range.s.c + 1,
        nrows = range.e.r - range.s.r + 1;
        //第二行改為標題內容
        for (var i = 0; i < ncols; i++) {
            var curr = getColumnNameByIndex(i) + '2',
            prev = getColumnNameByIndex(i) + '1';
            //復制首行
            sheet[curr] = sheet[prev];
            //單元格內容改為文本
            sheet[curr].v = sdata[i].text;
            //加批注
            sheet[curr].c = [{
                hidden: true,
                a: "SheetJS",
                t: sdata[i].field
            }];
            //第一行清空
            delete sheet[prev];
        }

        var merge = [];
        //合並單元格，2020-05-06
        for (var i = 0; i < ncols; i++) {
            //獲取導出字段名，設置為列批注
            if (sdata[i].merge) {
                merge = merge.concat(MergeColumn(sheet, range.s.r + 2, i, range.e.r));
            }
        }
        if (merge.length != 0) {
            sheet['!merges'] = merge;
        }

        sheet["!rows"] = []; //單元格行高
        for (var i = 1; i < nrows + 1; i++) {
            //設置列寬
            sheet["!rows"].push({
                hpt: 15
            });
        }

        //原文鏈接：https://blog.csdn.net/tian_i/java/article/details/84327329
        sheet["!cols"] = []; //單元格列寬，2020-05-11
        for (var i = 1; i < ncols + 1; i++) {
            //設置列寬
            sheet["!cols"].push({
                wpx: 80
            });

            for (var k = 2; k < nrows + 1; k++) {
                var curr = getColumnNameByIndex(i - 1) + k;
                //console.log(curr); console.log(sheet);
                sheet[curr].s = {
                    font: {
                        name: '宋體',
                        sz: 11,
                        bold: false,
                        color: {
                            rgb: "000"
                        },
                    },
                    //fill: {
                    //    bgColor: { indexed: 64 }, fgColor: { rgb: "FFFF00" }
                    //},
                    alignment: {
                        horizontal: "center",
                        vertical: "center",
                        //wrapText: true,
                    },
                    border: {
                        top: {
                            style: "thin",
                        },
                        bottom: {
                            style: "thin",
                        },
                        left: {
                            style: "thin",
                        },
                        right: {
                            style: "thin",
                        },
                    }
                }; //<====設置xlsx單元格樣式
            }
        }

        //轉為blob
        var blob = sheet2blob(sheet);

        var fileName = "成績管理" + getFullTime() + ".xlsx";
        //下載
        saveAs(blob, fileName);
    }
};

 合並單元格

function MergeColumn(sheet, StartRowNum, ColumnIndex, LastRowNum) {
    var sheetMerge = [];
    var rowNum = 0;
    for (var i = StartRowNum; i < LastRowNum + 1; i++) {
        rowNum = i + 1;
        var StartValue = sheet[getColumnNameByIndex(ColumnIndex) + rowNum].v;
        for (var k = i + 1; k < LastRowNum + 1; k++) {
            rowNum = k + 1;
            var CurrValue = sheet[getColumnNameByIndex(ColumnIndex) + rowNum].v; // console.log(CurrValue);
            if (StartValue != CurrValue) {
                if (k != i + 1) {
                    //合並
                    sheetMerge.push({
                        s: {
                            r: i,
                            c: ColumnIndex
                        },
                        e: {
                            r: k - 1,
                            c: ColumnIndex
                        }
                    });
                    i = k - 1;
                }
                break;
            } else if (k == LastRowNum) {
                //連同最后一行合並
                sheetMerge.push({
                    s: {
                        r: i,
                        c: ColumnIndex
                    },
                    e: {
                        r: LastRowNum,
                        c: ColumnIndex
                    }
                });
                i = LastRowNum;
                break;
            }
        }
    }
    return sheetMerge;
}

格式化日期，根據索引輸出列名

//js轉換 /Date(1464671903000)/ 格式的日期，轉換成：2016-07-11
function getFDate(date) {
    var d = eval('new ' + date.substr(1, date.length - 2));
    var ar_date = [d.getFullYear(), d.getMonth() + 1, d.getDate()];
    for (var i = 0; i < ar_date.length; i++) ar_date[i] = dFormat(ar_date[i]);
    return ar_date.join('-');
}
function dFormat(i) {
    return i < 10 ? "0" + i.toString() : i;
}

//Excel/Sheet根據索引輸出列名，2020-04-09
function getColumnNameByIndex(i) {
    var result = String.fromCharCode('A'.charCodeAt() + i % 26);

    while (i >= 26) {
        i /= 26;
        i--;
        result = String.fromCharCode('A'.charCodeAt() + i % 26) + result;
    }
    return result;
}

轉化，導出

其中write方法一定要用xlsxStyle對象調用，才能輸出帶格式文件；

//https://www.cnblogs.com/liuxianan/p/js-excel.html
// 將一個sheet轉成最終的excel文件的blob對象，然后利用URL.createObjectURL下載
function sheet2blob(sheet, sheetName) {
    sheetName = sheetName || 'sheet1';
    var workbook = {
        SheetNames: [sheetName],
        Sheets: {}
    };
    workbook.Sheets[sheetName] = sheet;
    // 生成excel的配置項
    var wopts = {
        bookType: 'xlsx',
        // 要生成的文件類型
        bookSST: false,
        // 是否生成Shared String Table，官方解釋是，如果開啟生成速度會下降，但在低版本IOS設備上有更好的兼容性
        type: 'binary'
    };

    //轉換成二進制 使用xlsx-style（XS）進行轉換才能得到帶樣式Excel，2020-05-11
    var wbout = xlsxStyle.write(workbook, wopts);
    //console.log(wbout);
    var blob = new Blob([s2ab(wbout)], {
        type: "application/octet-stream"
    });
    // 字符串轉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;
}

//獲取當前日期，2019-12-25
function getFullTime() {
    var now = new Date();
    var yy = now.getFullYear(); //年
    var mm = now.getMonth() + 1; //月
    var dd = now.getDate(); //日
    var hh = now.getHours(); //時
    var ii = now.getMinutes(); //分
    var ss = now.getSeconds(); //秒
    var ms = now.getMilliseconds(); //毫秒
    var clock = yy + "-";
    if (mm < 10) clock += "0";
    clock += mm + "-";
    if (dd < 10) clock += "0";
    clock += dd + "-";
    if (hh < 10) clock += "0";
    clock += hh + "-";
    if (ii < 10) clock += '0';
    clock += ii + "-";
    if (ss < 10) clock += '0';
    clock += ss + "-";
    clock += ms;
    return clock; //獲取當前日期
}

function saveAs(blob, fileName) {
    //生成一個a標簽
    var a = document.createElement('a');
    a.style.display = 'none';
    a.download = fileName;
    a.id = "aexport";
    //生成一個label標簽，用於觸發a標簽點擊事件
    var lb = document.createElement('label');
    lb.
    for = "aexport";
    a.appendChild(lb);
    //創建一個URL對象，指向Blob對象
    var objectURL = window.URL.createObjectURL(blob);
    a.href = objectURL;

    //把a標簽加入body
    document.body.appendChild(a);
    //觸發a標簽點擊事件
    lb.click();
    //IE不支持createObjectURL，特殊處理
    if (_isIE()) {
        window.navigator.msSaveOrOpenBlob(blob, fileName);
    }
    //刪除a標簽
    document.body.removeChild(a);
    //回收內存
    URL.revokeObjectURL(objectURL);
}

解析

讀取本地Excel，生成workbook，方法一，使用 { type: 'binary' } ；

// 讀取本地excel文件
function readWorkbookFromLocalFile(file, callback) {
    var reader = new FileReader();
    reader.onload = function(e) {
        var data;
        if (reader.result) {
            //讀取后內容，適用FireFox
            data = reader.result;
        } else {
            //讀取后內容，適用IE
            data = reader.content;
        }

        var workbook =XLSX.read(data, { type: 'binary' });
        if (callback) callback(workbook);
    };
    reader.readAsBinaryString(file);
}

//readAsBinaryString 兼容IE11，2020-04-03
//https://www.cnblogs.com/badprogrammer/p/10728024.html
if (!FileReader.prototype.readAsBinaryString) {
    FileReader.prototype.readAsBinaryString = function(fileData) { //解決ie11 大文件堆棧溢出的問題（for arrayBufferToString）
        var binary = "";
        var pt = this;
        var reader = new FileReader();
        reader.onload = function(e) {
            var bytes = new Uint8Array(reader.result);
            var length = bytes.byteLength;
            for (var i = 0; i < length; i++) {
                binary += String.fromCharCode(bytes[i]);
            }
            pt.content = binary;
            //console.log("binary length:" + binary.length);
            pt.onload(pt); //頁面內data取pt.content文件內容
        }
        reader.readAsArrayBuffer(fileData);
    }
}

讀取本地Excel，生成workbook，方法二，使用 { type: 'base64' } ；

function fixdata(data) { //文件流轉BinaryString
    var o = "",
    l = 0,
    w = 10240;
    for (; l < data.byteLength / w; ++l) o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w, l * w + w)));
    o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w)));
    return o;
}
// 讀取本地excel文件
function readWorkbookFromLocalFile(file, callback) {
    var reader = new FileReader();
    reader.onload = function(e) {
        var data;
        if (reader.result) {
            //讀取后內容，適用FireFox
            data = reader.result;
        } else {
            //讀取后內容，適用IE
            data = reader.content;
        }

        var workbook = XLSX.read(btoa(fixdata(data)), { type: 'base64' });
        if (callback) callback(workbook);
    };
    reader.readAsArrayBuffer(file);
}

處理表單內容

readWorkbookFromLocalFile(fileObj.files[0],readWorkbook);

function readWorkbook(workbook) {
    var sheetNames = workbook.SheetNames; // 工作表名稱集合
    var worksheet = workbook.Sheets[sheetNames[0]]; // 這里我們只讀取第一張sheet
    var range = XLSX.utils.decode_range(worksheet['!ref']);
    var ncols = range.e.c - range.s.c + 1,
        nrows = range.e.r - range.s.r + 1;

    //修改列名為批注內容
    for (var i = 0; i < ncols; i++) {
        var key = getColumnNameByIndex(i) + '2';
        worksheet[key].w = worksheet[key].c[0].t;
    }

    var json = XLSX.utils.sheet_to_json(worksheet, {
        range: 1
    });
    //IE不支持，注釋掉，2020-04-03
    //var json = Object.values(XLSX.utils.sheet_to_row_object_array(worksheet));

    /* DO SOMETHING HERE */
}

//Excel/Sheet根據索引輸出列名，2020-04-09
function getColumnNameByIndex(i) {
    var result = String.fromCharCode('A'.charCodeAt() + i % 26);

    while (i >= 26) {
        i /= 26;
        i--;
        result = String.fromCharCode('A'.charCodeAt() + i % 26) + result;
    }
    return result;
}

總結

• 本插件對瀏覽器要求較高，部分功能可能有兼容性問題；
• 替代方案一，NPOI，導出時在后端生成workbook，寫入輸出流在前端下載，項目參考；導入時在服務器讀取流為DataTable，再用SqlBulkCopy批量復制到數據庫，項目參考；
• 替代方案二，使用商業軟件，Wijmo，項目可參考https://www.cnblogs.com/likeFlyingFish/p/5794467.html；

---

 參考資料：

• https://www.cnblogs.com/likeFlyingFish/p/5794467.html
• https://www.jianshu.com/p/877631e7e411
• https://www.jianshu.com/p/74d405940305
• https://www.jianshu.com/p/869375439fee
• https://www.cnblogs.com/liuxianan/p/js-excel.html
• https://blog.csdn.net/tian_i/article/details/84327329