vue3+ts+vite

无后端提供数据的情况下，前端读取本地表格数据，并将数据放入页面结构中 展示在网页中
记得先安装npm install xlsx

目录

read_xlsx.ts

import * as XLSX from 'xlsx';
//将行,列转换
function transformSheets(sheets: { [key: string]: any }): any[] {
  var content: any[][]  = []
  var content1: any[][] = []
  var tmplist = []
  for (let key in sheets){
    //读出来的workbook数据很难读,转换为json格式,参考https://github.com/SheetJS/js-xlsx#utility-functions
    tmplist.push(XLSX.utils.sheet_to_json(sheets[key]).length)
    content1.push(XLSX.utils.sheet_to_json(sheets[key]))
  }
  var maxLength = Math.max.apply(Math, tmplist)
  //进行行列转换
  for (let y in [...Array(maxLength)]){
    content.push([])
    for (let x in [...Array(tmplist.length)]) {
      try {
        for (let z in content1[x][y] as { [key: string]: any }){
          content[y].push(content1[x][y][z])
        }
      } catch (error) {
        content[y].push('')
      }
    }
  }
  content.unshift([])
  for (let key in sheets){
    content[0].push(key)
  }
  return content

}
export {transformSheets}
// export {transformSheets as default}

.vue文件

<template>
				 <el-table 
                        stripe 
                        ref="multipleTableRef"
                        :data="sheetTableData"
                        style="width: 100%"
                    >
                        <el-table-column property="number" label="染色体" width="70">
                          <template #default="scope">
                              <div class="common_cell" @click="getCellDetail('all')">{{ scope.row.number }}</div>
                          </template>
                        </el-table-column>
                        <el-table-column property="validCount" label="有效位点数量/比列">
                          <template #default="scope">
                              <div class="common_cell" @click="getCellDetail('all')">{{ scope.row.validCount }}</div>
                          </template>
                        </el-table-column>
                        <el-table-column property="referCount" label="Refer位点数量/比列" >
                          <template #default="scope">
                              <div class="common_cell" @click="getCellDetail('refer')">{{ scope.row.referCount }}</div>
                          </template>
                        </el-table-column>
                        <el-table-column property="altCount" label="Alt位点数量/比列" >
                          <template #default="scope">
                              <div class="common_cell" @click="getCellDetail('alt')">{{ scope.row.altCount }}</div>
                          </template>
                        </el-table-column>
                        <el-table-column property="mixCount" label="杂合位点数量/比列" >
                          <template #default="scope">
                              <div class="common_cell" @click="getCellDetail('hybrid')">{{ scope.row.mixCount }}</div>
                          </template>
                        </el-table-column>
                    </el-table>
</template>				

<script setup lang="ts">
  import axios from 'axios'
  import * as XLSX from 'xlsx';
  import {transformSheets} from '../../utils/read_xlsx'
  interface ChromosomeInfo {
    number:string,
    validCount:string,
    referCount:string,
    altCount:string,
    mixCount:string,
  }
  const sheetTableData = ref<ChromosomeInfo[]>([])
  onMounted(() => {
    let url = "/chrom.xlsx" //放在public目录下的文件可以直接访问
   //读取二进制excel文件
     axios.get(url, {responseType:'arraybuffer'}).then((res) => {
       let data = new Uint8Array(res.data)
       let wb = XLSX.read(data, {type:"array"})
       let sheets = wb.Sheets
       let sheetData = transformSheets(sheets).slice(1, 11)
       sheetData.forEach(item => {
        sheetTableData.value.push({
          number: item[0],
          validCount: item[2]+'/'+Number(item[6]*100).toFixed(2)+'%',
          referCount: item[3]+'/'+Number(item[7]*100).toFixed(2)+'%',
          altCount: item[4]+'/'+Number(item[8]*100).toFixed(2)+'%',
          mixCount: item[5]+'/'+Number(item[9]*100).toFixed(2)+'%',
       })
      })
       console.log(sheetTableData.value)
     }).catch(err =>{
      console.log(err)
    })
  })
  </script>

备注：灵感来源于https://www.jb51.net/article/162144.htm