关于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);
}

 欢迎大家在评论区指正，不吝赐教！！！