前端xlsx解析上传的文件

上传组件

    <input type="file" ref="uploadRef" accept=".xls,.xlsx" class="none"/>

注册监听

onMounted(async () => {
  // 文件上传注册监听
  uploadRef.value.addEventListener("change", onFileChange)
})

js解析

import * as XLSX from "xlsx-js-style";

/**
 * 当文件上传控件变更时
 * @param e
 */
function onFileChange(e) {
  let files = e?.target?.files;
  if (files < 0) return;
  if (!/\.(xls|xlsx)$/.test(files[0].name.toLowerCase())) return;
  const fileReader = new FileReader();
  fileReader.readAsBinaryString(files[0]);
  fileReader.onload = ev => {
    try {
      const data = ev?.target?.result;
      const workbook = XLSX.read(data, {type: "binary"})
      const wsName = workbook.SheetNames[0];
      // 根据表格内容生成JSON数据
      const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsName]);
      const outPuts = [];
      for (let i= 0; i < ws.length; i++) {
        console.log(ws[i]); // 处理业务逻辑
      }
    } catch (e) {
    }
  }
}