前端解析excel内容，获取单元格数据

XLSX前端解析excel内容，支持多个工作簿获取单元格数据

前端利用XLSX解析获取excel文件数据

1、安装XLSX

pnpm i xlsx

2、使用

<script setup>
import * as XLSX from 'xlsx'
import { downLoadBlob } from '@/api/IntelligentReport/table'
const workbook = ref([]) // 存储工作簿对象
const sheetNames = ref([]); // 工作簿名称

const loadExcel = async () => {
  try {
    let params = {id: 15}
    // 获取后端文件流 arraybuffer类型
    await downLoadBlob(params).then(res => {
      const arrayBuffer = res;
      workbook.value = XLSX.read(arrayBuffer, { type: 'array' });
      console.log('解析：', workbook.value)
      sheetNames.value = workbook.value.SheetNames.map(item => {
        return {
          label: item,
          value: item
        }
      })
    })
    // const response = await fetch('/demo.xlsx'); // 本地pulic静态文件
    // const arrayBuffer = await response.arrayBuffer(); // 将数据转换为arraybuffer类型
    // const data = new Uint8Array(arrayBuffer);
    // workbook.value = XLSX.read(data, { type: 'array' });
    // sheetNames.value = workbook.value.SheetNames.map(item => {
    //   return {
    //     label: item,
    //     value: item
    //   }
    // })
    // // const worksheet = workbook.Sheets['xxx'];
    // // tableValue.value = worksheet['C15'] ? worksheet['C15'].v.toFixed(0) : null;
  } catch (error) {
    console.error('加载 Excel 文件时出错:', error);
  }
};
</script>

import request from "@/utils/request";
// 参数处理
function tansParams(params) {
  let result = ''
  for (const propName of Object.keys(params)) {
    const value = params[propName];
    var part = encodeURIComponent(propName) + "=";
    if (value !== null && value !== "" && typeof (value) !== "undefined") {
      if (typeof value === 'object') {
        for (const key of Object.keys(value)) {
          if (value[key] !== null && value[key] !== "" && typeof (value[key]) !== 'undefined') {
            let params = propName + '[' + key + ']';
            var subPart = encodeURIComponent(params) + "=";
            result += subPart + encodeURIComponent(value[key]) + "&";
          }
        }
      } else {
        result += part + encodeURIComponent(value) + "&";
      }
    }
  }
  return result
}

export function downLoadBlob(data) {
  return request({
    url: '/excel/excelDownload',
    method: "post",
    data: data,
    transformRequest: [
      (params) => {
        return tansParams(params);
      },
    ],
    headers: { "Content-Type": "application/x-www-form-urlencoded" },
    responseType: "arraybuffer" // 转换为arraybuffer，不是blob
  });
}