解决 SheetJS 日期时间类型显示多出43秒的问题

最近在优化后台数据导出功能，把原先后台生成 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>

 

演示文章来源：https://www.yangdx.com/