SheetJS导出Excel时日期显示异常、ID转科学计数法及丢失前导零问题求助

• ID列显示科学计数法、丢失前导零：SheetJS默认会自动识别单元格内容的格式，将看起来符合数值规则的字符串强制转换为数值类型。11位全数字ID超过Excel常规数值的显示长度，会自动转为科学计数法展示；以0开头的类数字字符串转为数值后，前导零会被自动丢弃。
• 日期列显示######、日月颠倒：SheetJS默认会将符合日期格式的字符串识别为日期类型，但解析规则为月/日/年，会把原始日/月/年格式的日期的日月位置识别颠倒；同时Excel中日期类型的单元格如果列宽不足，就会显示为######，鼠标悬浮时才会展示完整内容。

方案1：保留HTML表格原始文本内容（操作最简单） #

直接关闭SheetJS的自动类型转换功能，所有单元格直接取DOM中的原始文本内容，不会做任何类型转换，完全和网页展示效果一致，修改代码如下：

<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.2/xlsx.full.min.js"></script>
<script>
    var a = document.getElementById("new_table");
    // 增加raw: true配置，关闭自动类型转换，保留单元格原始文本
    var fp = XLSX.utils.table_to_book(a, {sheet:"table", raw: true});
    XLSX.write(fp,{
        bookType:'xlsx',
        type:'base64'
    });
    XLSX.writeFile(fp,"table.xlsx");
</script>

方案2：保留日期为Excel可识别的日期类型（方便后续数据处理） #

如果需要导出的日期可以直接在Excel中做筛选、计算等操作，可手动设置单元格格式、列宽来解决异常，修改代码如下：

<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.2/xlsx.full.min.js"></script>
<script>
    var a = document.getElementById("new_table");
    var fp = XLSX.utils.table_to_book(a, {sheet:"table"});
    var ws = fp.Sheets["table"];

    // 配置列宽，避免日期列显示为######，wch值为列宽字符数，可根据实际列数和需要调整
    ws['!cols'] = [
        {wch: 15}, // 第一列宽度
        {wch: 18}, // 假设第二列为日期列
        {wch: 20}  // 假设第三列为ID列，后续其他列按需补充
    ];

    // 遍历所有数据行（跳过表头），调整ID和日期列的单元格格式
    var range = XLSX.utils.decode_range(ws['!ref']);
    for(let row = range.s.r + 1; row <= range.e.r; row++) {
        // 处理ID列，假设ID列索引为2（列从左到右从0开始计数，按实际情况修改）
        let idCell = ws[XLSX.utils.encode_cell({r: row, c: 2})];
        if(idCell) {
            idCell.t = 's'; // 强制单元格类型为字符串
            idCell.z = '@'; // 设置单元格格式为文本，避免自动转数值
        }
        // 处理日期列，假设日期列索引为1，按实际情况修改
        let dateCell = ws[XLSX.utils.encode_cell({r: row, c: 1})];
        if(dateCell) {
            dateCell.z = 'dd/mm/yyyy'; // 设置日期显示格式为日/月/年
        }
    }

    XLSX.write(fp,{
        bookType:'xlsx',
        type:'base64'
    });
    XLSX.writeFile(fp,"table.xlsx");
</script>

注意：代码中的列索引需要和你实际HTML表格的列顺序对应，自行调整即可。

内容的提问来源于stack exchange，提问作者user16759636