基於LuckySheet在線表格的Excel下載功能開發

最近開發的項目中使用到了一個非常強大的在線表格展示庫Luckysheet

下面記錄一下基於luckysheet的下載功能的開發

第一步：獲取到要下載的數據。

LuckySheet給我們提供了一個獲取所有sheet數據的方法 luckysheet.getluckysheetfile()，通過該方法我們可以得到所有的sheet的數據以及配置信息

let allSheetData = luckysheet.getluckysheetfile();
let sheet1 = allSheetData[0];

let downOriginData = sheet1.data;  

// 該方法會返回一個數組結構，其中包含了我們所創建的所有的sheet數據
// allSheetData = [{sheet1},{sheet2},{sheet3}]

// 每個sheet的數據結果如下
{
    "name": "sheet1",
    "color": "",
    "chart": [],
    "status": 0,
    "order": 0,
    "celldata": [],
　　 "data":[],
    "row":90,
    "column":100,
    "index": 0,
    "visibledatarow": [],
    "visibledatacolumn": [],
    "rowsplit": [],
    "ch_width": 4629,
    "rh_height": 1681,
    "luckysheet_select_save": {},
    "luckysheet_selection_range": {},
    "scrollLeft": 0,
    "scrollTop": 0,
    "load": "1",
    "config": {
        "columlen": {},
        "rowhidden": {}
    }
    ,
    "pivotTable": {},
    "isPivotTable": true,
    "calcChain": [],
    "filter":{key1:value1, key2:value2},
    "filter_select": {}
}

data的數據結構

 

let arr = [];  // 所有的單元格數據組成的二維數組
let bgConfig = {};
let percentageReg = /%$/;
let cellValue = null;
// 獲取單元格的背景色
function setBackground(row, col, bg) {
    var colA = luckysheet.luckysheetchatatABC(col);
    var key = colA + (row + 1);
    bgConfig[key] = bg.replace(/\#?/, '');
}

// 判斷值類型是否為百分比 %
function isPercentage(value) {
    return percentageReg.test(value.m) && value.ct && value.ct.t === 'n'
}

// 獲取二維數組
for (let row = 0; row < downOriginData.length; row++) {
    let arrRow = [];
    for (let col = 0; col < downOriginData[row].length; col++) {
        if (cellValue = downOriginData[row][col]) {
            // 處理單元格的背景顏色
            if (cellValue.bg) {
                setBackground(row, col, cellValue.bg)
            }
            if (cellValue.ct != null && cellValue.ct.t == 'd') {
                //  d為時間格式  2019-01-01   或者2019-01-01 10:10:10
                arrRow.push(new Date(cellValue.m.replace(/\-/g, '/'))) //兼容IE
            } else if (cellValue.m && isPercentage(cellValue)) {
                //百分比問題
                arrRow.push(cellValue.m)
            } else {
                arrRow.push(cellValue.v)
            }
        }
    }
    arr.push(arrRow)
}

第二步：通過SheetJs將數據轉化為excel格式數據

let opts = {
    dateNF: 'm/d/yy h:mm',
    cellDates: true,
    cellStyles: true
}
let ws = XLSX.utils.aoa_to_sheet(arr, opts)

 第三步：設置單元格的類型以及單元格樣式

let reg = /[\u4e00-\u9fa5]/g;
for (let key in ws) {
    let item = ws[key]
    if (item.t === 'd') {
        if (item.w) {
            //時間格式的設置
            let arr = item.w.split(' ')
            if (arr[1] && arr[1] == '0:00') {
                ws[key].z = 'm/d/yy'
            } else {
                item.z = 'yyyy/m/d h:mm:ss'
            }
        }
    } else if (item.t === 's') {
        //百分比設置格式
        if (item.v && !item.v.match(reg) && item.v.indexOf('%') > -1) {
            item.t = 'n'
            item.z = '0.00%'
            item.v = Number.parseFloat(item.v) / 100
        }
        else if (item.v && item.v.match(reg)) {
            //含有中文的設置居中樣式
            item['s'] = {
                alignment: { vertical: 'center', horizontal: 'center' }
            }
        }
    }
    // 設置單元格樣式
    if (bgConfig[key]) {
        ws[key]['s'] = {
            alignment: { vertical: 'center', horizontal: 'center' },
            fill: { bgColor: { indexed: 32 }, fgColor: { rgb: bgConfig[key] } },
            border: {
                top: { style: 'thin', color: { rgb: '999999' } },
                bottom: { style: 'thin', color: { rgb: '999999' } },
                left: { style: 'thin', color: { rgb: '999999' } },
                right: { style: 'thin', color: { rgb: '999999' } }
            }
        }
    }
}

第四步：組裝下載數據格式

    let name = 'sheet1';
        let tmpWB = {
          SheetNames: [name], //保存的表標題
          Sheets: {
            [name]: Object.assign({},ws)//內容 
          }
        }

 第五步：合並單元格配置

let mergeConfig = sheet1.config.merge
let mergeArr = [];
if (JSON.stringify(mergeConfig) !== '{}') {
    mergeArr = handleMergeData(mergeConfig)

　　　 tmpWB.Sheets[name]['!merges'] = merge

}
//處理合並單元格config數據
function handleMergeData(origin) {

　　let result = []
    if (origin instanceof Object) {
        var r = "r",
            c = "c",
            cs = "cs",
            rs = "rs";
        for (var key in origin) {
            var startR = origin[key][r];
            var endR = origin[key][r];
            var startC = origin[key][c];
            var endC = origin[key][c];

            // 如果只占一行 為1 如果占兩行 為2
            if (origin[key][cs] > 0) {
                endC = startC + (origin[key][cs] - 1);
            }
            if (origin[key][rs] > 0) {
                endR = startR + (origin[key][rs] - 1);
            }
            // s為合並單元格的開始坐標  e為結束坐標
            var obj = { s: { "r": startR, "c": startC }, e: { "r": endR, "c": endC } }
            result.push(obj)
        }
    }
　　return result
}

 第六步：寫入文件

    
let fileName = 'test';
// sheetjs js-xlsx 的方法 ，不能設置單元格格式
 XLSX.writeFile(tmpWB,fileName + ".xlsx");

 

 由於sheetJs 社區版本的方法不支持設置樣式，可以選擇Pro版本，需要付費，好像是 1000$

當然如果不需要設置背景色，單元格對齊方式，邊框等樣式，社區版就夠用了。

另一種解決方法 xlsx-style，

function s2ab(s) {
    if (typeof ArrayBuffer !== 'undefined') {
        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;
    } else {
        var buf = new Array(s.length);
        for (var i = 0; i != s.length; ++i) buf[i] = s.charCodeAt(i) & 0xFF;
        return buf;
    }
}
function saveAs(obj, fileName) {
    var tmpa = document.createElement("a");
    tmpa.download = fileName || "download";
    tmpa.href = URL.createObjectURL(obj);
    tmpa.click();
    setTimeout(function () {
        URL.revokeObjectURL(obj);
    }, 100);
}

ws = new Blob(
    [
        s2ab(
            S_XLSX.write(tmpWB, { bookType: 'xlsx', bookSST: false, type: 'binary' })//這里的數據是用來定義導出的格式類型
        )
    ]
)
saveAs(ws, fileName + '.xlsx')