react-html-table-to-excel 数字精度丢失问题

66 阅读1分钟

package: react-html-table-to-excel

  1. excel 导出 流程

接口返回 data -> HTML table -> xlsx

  1. 问题:

数据正常:

接口返回的是 字符串,页面展示正常,导出 生成 的excel 文件,数据也是正确的,但是用 wps 一打开,就转成 数字(科学计数法)了。

导出数据

截屏2023-06-27 16.03.55.png

打开时

截屏2023-06-27 16.05.28.png

  1. 解决方法

td标签 加上 vnd.ms-excel.numberformat:@mso-number-format:'\@' style 属性,表示 文本格式

<tr class="ant-table-row ant-table-row-level-0" data-row-key="0">
    <td style="vnd.ms-excel.numberformat:@" class="">1223115645647894489</td>
    <td style="vnd.ms-excel.numberformat:@" class="">8458944854891549875</td>
</tr>

显示正常

截屏2023-06-27 16.07.04.png

相关文档

excel-styles.md

AttributeDescription
mso-number-format:"0"NO Decimals
mso-number-format:"0.000"3 Decimals
mso-number-format:"#,##0.000"Comma with 3 dec
mso-number-format:"mm/dd/yy"Date7
mso-number-format:"mmmm\ d,\ yyyy"Date9
mso-number-format:"m/d/yy\ h:mm\ AM/PM"D -T AMPM
mso-number-format:"Short Date"01/03/1998
mso-number-format:"Medium Date"01-mar-98
mso-number-format:"d-mmm-yyyy"01-mar-1998
mso-number-format:"Short Time"5:16
mso-number-format:"Medium Time"5:16 am
mso-number-format:"Long Time"5:16:21:00
mso-number-format:"Percent"Percent - two decimals
mso-number-format:"0%"Percent - no decimals
mso-number-format:"0.E+00"Scientific Notation
mso-number-format:"@"Text
mso-number-format:"#\ ???/???"Fractions - up to 3 digits (312/943)
mso-number-format:"\0022£\0022#,##0.00"£12.76
mso-number-format:"#,##0.00_ ;[Red]-#,##0.00\ "2 decimals, negative numbers in red and signed (1.56 -1.56)

Styling Excel cells with mso-number-format CSS attribute