Vue.js借助xlsx库按列读取Excel、提取指定列数据并转JSON的实现咨询

原代码存在的错误点 #

• 工作表范围属性拼写错误：xlsx库中存储工作表有效数据范围的键为sheet['!ref']，原代码写为sheet['!refs']，会导致无法获取正确的单元格遍历范围。
• 单元格地址编码方法使用错误：XLSX.utils.encode_col仅接收数字类型列索引，返回对应列的字母标识（如输入0返回'A'），无法拼接带行号的完整单元格地址；生成可匹配工作表存储结构的单元格地址，必须使用XLSX.utils.encode_cell({c: 列索引, r: 行索引})方法。
• 列读取逻辑缺失逐行遍历：原代码固定将行号设置为工作表起始行（R = range.s.r），仅读取了每列第一行的单元格值，没有循环遍历同列下的所有行，无法获取整列的完整数据。

可直接运行的实现代码 #

提取指定单列的逐行数据 #

方法支持传入目标列索引，默认读取第一列（列索引0）：

methods: {
  getColumnData(sheet, targetColIndex = 0) {
    const colData = []
    // 解析工作表有效范围
    const range = XLSX.utils.decode_range(sheet['!ref'])
    // 校验目标列是否在有效范围内
    if (targetColIndex < range.s.c || targetColIndex > range.e.c) return colData
    // 逐行遍历目标列的所有单元格
    for (let rowNum = range.s.r; rowNum <= range.e.r; rowNum++) {
      const cellAddr = XLSX.utils.encode_cell({ c: targetColIndex, r: rowNum })
      // 读取单元格纯文本值，空单元格赋值为空字符串
      const cellValue = sheet[cellAddr]?.v ?? ''
      colData.push(cellValue)
    }
    return colData
  }
}

在原created钩子的请求回调中调用时，直接传列索引即可：

// 提取第一列
this.content = this.getColumnData(sheets, 0)
// 提取第三列
// this.content = this.getColumnData(sheets, 2)

按列维度生成全量JSON结构 #

如果需要逐列读取所有数据，生成「列头作为键、整列数据作为值」的JSON结构，可使用如下方法：

getColumnsAsJson(sheet) {
  const columnsResult = {}
  const range = XLSX.utils.decode_range(sheet['!ref'])
  // 遍历所有列
  for (let colNum = range.s.c; colNum <= range.e.c; colNum++) {
    // 读取第一行作为当前列的列头
    const headerAddr = XLSX.utils.encode_cell({ c: colNum, r: range.s.r })
    const columnName = sheet[headerAddr]?.v || `column_${colNum}`
    // 逐行读取当前列的剩余数据
    const rowValues = []
    for (let rowNum = range.s.r + 1; rowNum <= range.e.r; rowNum++) {
      const cellAddr = XLSX.utils.encode_cell({ c: colNum, r: rowNum })
      rowValues.push(sheet[cellAddr]?.v ?? '')
    }
    columnsResult[columnName] = rowValues
  }
  return columnsResult
}

模板渲染适配 #

原模板的嵌套循环是针对二维行数据结构的，读取单列数据时，可简化为单层循环渲染：

<table v-if="content.length">
  <tr v-for="(item, index) in content" :key="index">
    <td>{{ item }}</td>
  </tr>
</table>

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