關於js-xlsx的使用

寫在前頭，本人是名Java開發人員，偶爾在前端打打醬油，寫出的代碼或許存在問題，請路過的大神一一指正，不吝感激。

 　　最近公司准備做一些關於Excel 數據導入和導出相關需求，之前有在開源社區看到說比起純后端解析，前端更有優勢，一來是現在的個人電腦的性能已經有了長足的進步，而來，服務端的資源本就金貴，后端服務的瓶頸就是業務系統平台的瓶頸，對於服務端的優化，本就是一個永久的話題，說到這里，基本上也就該說今天的主角了，js-xlsx。

　　要說js-xlsx，就不得不說xlsx，為什么呢，我也是在剛接觸是一頭霧水，因為在npm上搜索xlsx,第一條就是xlsx，但是進去之后就蒙了，怎么是js-xlsx呢？不信你看看。那在npm上搜索js-xlsx呢,進去之后卻看到，xlsx-style,???如果你足夠細心的話可能還會看到一個包，那就是xlsx-style，看到這里你估計就該問了，xlsx，js-xlsx,xlsx-style這些都是什么鬼，我說下我的理解吧，這些都是xlsx的分支，只不過由於xlsx的部分功能問題，其他人在xlsx的基礎上衍生出了很多版本，比如還未提到的node-xlsx，以及鄙人的sognyz-xlsx，這些都是或多或少的引用了官方代碼，在此基礎上，進行了擴展開發，至於該怎么用，我說下我的看法，xlsx應該是bug最少也最穩定的，至少人家是鼻祖，關於xlsx-style和js-xlsx，它們在原有的功能基礎上，添加了對導出樣式的控制，讓導出的Excel更加滿足業務需要，比如說一些常見的設置字體樣式，大小，顏色等待，但是我使用cdn方式引入xlsx-style時沒有問題，但是使用ES6 import 語法是出現小問題（網上查詢頁面解決），在這個過程中，遇見了node-xlsx和js-xlsx，簡單使用之后，發現js-xlsx是我要找的，node-xlsx是在js-xlsx的基礎之上進行的一層薄薄的封裝，不過這層封裝也大大降低了js-xlsx的上手難度（值得自己學習），啰里啰嗦低講到這里你估計又想說了，那就使用被，還費什么話，額~~~廢話少說，撿重點的~~~

　　先說關於導入日期處理這塊，導入的文件中包含三種日期格式，截圖如下，關於代碼信息，在文章末尾處

當我看到數據時，我得內心是慌亂的一逼，截圖說明下

js-xlsx將數據直接解析成了個性化數據，瀏覽過源碼就會發現，它是根據excel中的格式進行的格式化，雖然未必能轉換成跟office中一模一樣，但是確實實現了一大部分，但是這種數據丟給我的程序，我豈不是要涼涼，我們當然是希望他們給我們一種統一的格式（yyyy-MM-dd hh:mm或者時間戳格式），這樣才方便自己程序處理，這個問題先記下，

 關於數字的問題，Excel截圖如下，我的文件

 

解析，看數據，截圖說明

哪里有兩個問題，價格的值，莫名的多了個空格，而且還是字符串格式，身份證號的值，竟然使用了科學計數法，這，這，好牛B的程序，然而呢。。。我想靜靜......

js-xlsx雖然很強大哦，但是他並沒有暴露出來一些關於處理數據的入口，哎，思來想去，要不自己改改？

然后就有了，

npm上的 songyz-xlsx

github上的 songyz-xlsx

 

另外，相關代碼

//表頭單元格樣式
export const titleStyle = {
    font: {
        bold: true,
    },
    alignment: {
        horizontal: "center",
        vertical: "center",
    },
    border: {
        top: {
            style: "thin",
        },
        bottom: {
            style: "thin",
        },
        left: {
            style: "thin",
        },
        right: {
            style: "thin",
        },
    }
};
//內容單元格樣式
export const bodyStyle = {
    alignment: {
        vertical: "center",
    },
    border: {
        top: {
            style: "thin",
        },
        bottom: {
            style: "thin",
        },
        left: {
            style: "thin",
        },
        right: {
            style: "thin",
        },
    }
};

// 將指定的自然數轉換為26進制表示。映射關系：[0-25] -> [A-Z]。
export const getCharCol = (n) => {
    let s = '',
        m = 0
    while (n > 0) {
        m = n % 26 + 1
        s = String.fromCharCode(m + 64) + s
        n = (n - m) / 26
    }
    return s
}

//將數據寫到文件中
export const writeFile = (fname, data, enc) => {
    /*global IE_SaveFile, Blob, navigator, saveAs, URL, document, File, chrome */
    if (typeof IE_SaveFile !== 'undefined') return IE_SaveFile(data, fname);
    if (typeof Blob !== 'undefined') {
        var blob = new Blob([blobify(data)], { type: "application/octet-stream" });
        if (typeof navigator !== 'undefined' && navigator.msSaveBlob) return navigator.msSaveBlob(blob, fname);
        if (typeof saveAs !== 'undefined') return saveAs(blob, fname);
        if (typeof URL !== 'undefined' && typeof document !== 'undefined' && document.createElement && URL.createObjectURL) {
            var url = URL.createObjectURL(blob);
            if (typeof chrome === 'object' && typeof(chrome.downloads || {}).download == "function") {
                if (URL.revokeObjectURL && typeof setTimeout !== 'undefined') setTimeout(function() { URL.revokeObjectURL(url); }, 60000);
                return chrome.downloads.download({ url: url, filename: fname, saveAs: true });
            }
            var a = document.createElement("a");
            if (a.download != null) {
                a.download = fname;
                a.href = url;
                document.body.appendChild(a);
                a.click();
                document.body.removeChild(a);
                if (URL.revokeObjectURL && typeof setTimeout !== 'undefined') setTimeout(function() { URL.revokeObjectURL(url); }, 60000);
                return url;
            }
        }
    }
    // $FlowIgnore
    if (typeof $ !== 'undefined' && typeof File !== 'undefined' && typeof Folder !== 'undefined') try { // extendscript
        // $FlowIgnore
        var out = File(fname);
        out.open("w");
        out.encoding = "binary";
        if (Array.isArray(payload)) payload = a2s(payload);
        out.write(payload);
        out.close();
        return payload;
    } catch (e) { if (!e.message || !e.message.match(/onstruct/)) throw e; }
    throw new Error("cannot save file " + fname);
}

/* normalize data for blob ctor */
function blobify(data) {
    if (typeof data === "string") return s2ab(data);
    if (Array.isArray(data)) return a2u(data);
    return data;
}

function s2ab(s) {
    if (typeof ArrayBuffer === 'undefined') return s2a(s);
    var buf = new ArrayBuffer(s.length),
        view = new Uint8Array(buf);
    for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
    return buf;
}

function a2u(data) {
    if (typeof Uint8Array === 'undefined') throw new Error("Unsupported");
    return new Uint8Array(data);
}

import XLSX from 'songyz-xlsx'

import { titleStyle, bodyStyle } from './xlsx-support/common'
import { getCharCol, writeFile } from './xlsx-support/util'

//導入文件的類型
export const xlsxTypes = ["xlsx", "xlc", "xlm", "xls", "xlt", "xlw", "csv"];

//導入文件
export const importSlsx = (file, opts) => {
    return new Promise(function (resolve, reject) {
        const reader = new FileReader()
        reader.onload = function (e) {
            opts = opts || {};

            opts.type = 'binary';
            opts._dateType = opts._dateType || 1; //1,"yyyy-MM-dd hh:mm",2,時間戳
            opts._numberType = opts._numberType || 1; //1,不適用科學計數法,2,使用科學計數法

            const wb = XLSX.read(e.target.result, opts);
            resolve(Object.keys(wb.Sheets).map(key => XLSX.utils.sheet_to_json(wb.Sheets[key])).reduce((prev, next) => prev.concat(next)))
        }
        reader.readAsBinaryString(file.raw)
    })
}

//導出數據
export const exportXlsx = (dataArray, fileName) => {
    let type = 'xlsx';
    dataArray = dataArray || [{}];
    fileName = fileName || 'file';

    var keyMap = Object.keys(dataArray[0]);
    var title = {};
    keyMap.forEach(key => title[key] = key);
    dataArray.unshift(title);

    //用來保存轉換好的json 
    var sheetData = [];

    dataArray.map((row, i) => {
        let style = i == 0 ? titleStyle : bodyStyle;
        return keyMap.map((key, j) => {
            return {
                style: style,
                value: row[key],
                position: (j > 25 ? getCharCol(j) : String.fromCharCode(65 + j)) + (i + 1)
            };
        })
    }).reduce((prev, next) => prev.concat(next)).forEach((cell, i) =>
        sheetData[cell.position] = {
            v: cell.value,
            s: cell.style
        }
    );
    var outputPos = Object.keys(sheetData); //設置區域,比如表格從A1到D10

    var wb = {
        SheetNames: ['mySheet'], //保存的表標題
        Sheets: {
            'mySheet': Object.assign({},
                sheetData, //內容
                {
                    '!ref': outputPos[0] + ':' + outputPos[outputPos.length - 1] //設置填充區域
                }
            )
        }
    };
    var buffer = XLSX.write(wb, { bookType: type, bookSST: false, type: 'buffer' });

    writeFile(fileName + "." + type, buffer);
}

 

 歡迎大家在評論區指正，不吝賜教！！！