VUE3 关于XLSX导出表格 全数字的字符串格式会转变数字格式导致精度丢失

安装：npm install xlsx

import * as XLSX from "xlsx";





//直接导出
const exportTableRef = ref(null);
const exportBtn = () => {
  const tableDom = exportTableRef.value?.$el;
  if (!tableDom) {
    return;
  }
  
  const wb = XLSX.utils.table_to_book(tableDom);
  XLSX.writeFile(wb, '表格数据.xlsx');
};
——————————————————————————————————————————




// 导出
/*
（注意这里有一个坑，如果直接导出（见上方代码段）的话 会出现识别错误 
 例如身份证号码 字符串类型但全是数字 导出后就会出现把身份证号码变成数字 导致精度丢失）
 故使用以下方法解决
 ——www
*/
const exportTableRef = ref(null);
const exportBtn = () => {
  const tableDom = exportTableRef.value?.$el;
  if (!tableDom) {
    return;
  }

  // 获取表头数据
  const theadRow = tableDom.querySelector('thead tr');
  const headerData = [];
  const headerCells = theadRow.querySelectorAll('th');
  headerCells.forEach(cell => {
    headerData.push({ t: 's', v: cell.textContent.trim() });
  });

  // 获取表格数据
  const tbodyRows = tableDom.querySelectorAll('tbody tr');
  const bodyData = [];

  // 遍历表格行
  tbodyRows.forEach(row => {
    const rowData = [];
    const cells = row.querySelectorAll('td');

    // 遍历表格单元格
    cells.forEach(cell => {
      // 检查单元格内容是否全为数字
      const cellContent = cell.textContent.trim();
      if (/^-?\d+$/.test(cellContent)) {
        // 如果是纯数字，则将数据类型设置为字符串
        rowData.push({ t: 's', v: cellContent });
      } else {
        rowData.push({ t: 's', v: cellContent });
      }
    });

    bodyData.push(rowData);
  });

  // 创建工作簿
  const ws = XLSX.utils.aoa_to_sheet([headerData, ...bodyData]);
  const wb = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
  // console.log(`output->wb`, wb)
  // 删除操作列
  delete wb.Sheets.Sheet1.O1;//注意是字母
  delete wb.Sheets.Sheet1.O2;
  delete wb.Sheets.Sheet1.O3;
  // 保存文件
  XLSX.writeFile(wb, '表格数据.xlsx');
};

<el-button style="margin-bottom: 10px" @click="exportBtn">导出表格</el-button>
<el-table ref="exportTableRef" :data="arr.rows" border style="width: 100%" table-layout="auto">
<el-table-column prop="IDcard" label="身份证号码" />
……
</el-table>

对了还有一个导入

// 导入
function chooseExcel(e) {
  const files = e.target.files;
  if (files.length <= 0) {
    return false;
  } else if (!/\.(xls|xlsx)$/.test(files[0].name.toLowerCase())) {
    ElMessage({
      message: "上传格式不正确，请上传xls或者xlsx格式！",
      type: "error",
    });
    return false;
  }
  // 读取表格数据
  const fileReader = new FileReader();
  fileReader.onload = function (ev) {
    const workbook = XLSX.read(ev.target.result, {
      type: "binary",
      cellDates: true,
    });
    const wsname = workbook.SheetNames[0];
    const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]);
    dealExcel(ws);
  };
  fileReader.readAsBinaryString(files[0]);
}
//对导入的表格 字段做处理 例把身份证号码改为IDcard
function dealExcel(ws) {
  let exmap = {
    身份证号码: "IDcard",
  };
  if (ws != null && ws.length > 0) {
    // 处理时间格式
  }
  ws.forEach(function (sourceObj) {
    Object.keys(sourceObj).map(function (keys) {
      let newKey = exmap[keys];
      if (newKey) {
        sourceObj[newKey] = sourceObj[keys];
        delete sourceObj[keys];
      }
    });
  });
  console.log(`output->ws`, ws)
  // 上传数据库 批量上传 任务队列
  这个还在写……
}

<input type="file" accept=".xls,.xlsx" @change="chooseExcel($event)" />

不知道其他人有没有遇到过这个问题，看似困难实际上总有办法解决。
因为我刚接触xlsx这个工具，缺乏详细的了解，如果有更好的解决办法，欢迎留言。
附xlsx官网：xlsx-npm