最近在优化后台数据导出功能,把原先后台生成 Excel 的功能(PhpExcel太吃内存),改用 ajax 加载每页数据然后前端 JS 生成 Excel。

找到一个前端生成 Excel 的类库 SheetJS:https://github.com/SheetJS/js-xlsx,以及一篇使用介绍的博文:https://www.cnblogs.com/liuxianan/p/js-excel.html

在导出日期时间的数据列时,想当然的使用了 Date 类型,然后设置显示格式为 yyyy-mm-dd hh:mm:ss。可是最终结果却显示有偏差,莫名比原来的值多了43秒。

搜索了一下这个问题,发现早有人在 github 上提出来:https://github.com/SheetJS/js-xlsx/issues/1470。细看 SheetJS 官方的 README.md,其实这不算是一个 BUG,而是因为 Excel 采用了不同的时间显示方式,跟时区有一定关系。

问题代码如下:

<script src="xlsx.core.min.js"></script>
<script>
    var sheetData = {
        '!ref': 'A1:B3',
        'A1': { v: 'String型日期' },
        'A2': { v: '2019-08-12 14:50:10', t: 's' },
        'A3': { v: '2019-09-20 09:10:05', t: 's' },
        'B1': { v: 'Date型日期' },
        'B2': { v: '2019-08-12 14:50:10', t: 'd', z: 'yyyy-mm-dd hh:mm:ss' },
        'B3': { v: '2019-09-20 09:10:05', t: 'd', z: 'yyyy-mm-dd hh:mm:ss' },
    };

    var sheetName = 'Sheet1';
    var filename = "test.xlsx";

    var workbook = {
        SheetNames: [sheetName],
        Sheets: {}
    };

    workbook.Sheets[sheetName] = sheetData;

    XLSX.writeFile(workbook, filename, { compression: true });
</script>

A列为字符串型数据(即原始值),B列为 Date 类型数据,一样的日期时间,导出 Excel 后最终显示如下,B列比A列多了43秒:

解决这个问题最快的办法就是,遇到日期时间的数据列,直接使用 String 类型导出就好,不要用 Date。

但是这样会有另一个问题,String 列无法像 Date 列一样做筛选,如下图:

那有没有一个完美的解决方案呢?有两个办法。

第一种:根据时区判断,在导入的日期时间值上减去差值。如我们的北京时间要减去43秒,最终显示到 Excel 上就不会有偏差了。

第二种:一个变通的方法,使用 Excel 公式拼接日期和时间,跳过时区的转换过程。如原始值 2019-08-12 14:50:10,用公式拼接:=DATEVALUE("2019-08-12")+TIMEVALUE("14:50:10")

如下图:

且可以做正常的日期时间筛选:

数据类型是 String,设置了显示格式,改造后的代码如下:

<script src="xlsx.core.min.js"></script>
<script>
var sheetData = {
    '!ref': 'A1:C3',
    'A1': { v: 'String型日期' },
    'A2': { v: '2019-08-12 14:50:10', t: 's' },
    'A3': { v: '2019-09-20 09:10:05', t: 's' },
    'B1': { v: 'Date型日期' },
    'B2': { v: '2019-08-12 14:50:10', t: 'd', z: 'yyyy-mm-dd hh:mm:ss' },
    'B3': { v: '2019-09-20 09:10:05', t: 'd', z: 'yyyy-mm-dd hh:mm:ss' },
    'C1': { v: '公式拼接' },
    'C2': { v: '2019-08-12 14:50:10', t: 's', z: 'yyyy-mm-dd hh:mm:ss', f: 'DATEVALUE("2019-08-12")+TIMEVALUE("14:50:10")' },
    'C3': { v: '2019-09-20 09:10:05', t: 's', z: 'yyyy-mm-dd hh:mm:ss', f: 'DATEVALUE("2019-09-20")+TIMEVALUE("09:10:05")' },
};

var sheetName = 'Sheet1';
var filename = "test.xlsx";

var workbook = {
    SheetNames: [sheetName],
    Sheets: {}
};

workbook.Sheets[sheetName] = sheetData;

XLSX.writeFile(workbook, filename, { compression: true });
</script>