yos_web/src/components/preview/excelViewer.vue

<template>
  <div class="excel-container">
    <table border="1" cellspacing="0">
      <tr v-for="(row, i) in tableData" :key="i">
        <td v-for="cell in row">{{ cell }}</td>
      </tr>
    </table>
  </div>
</template>

<script>
import * as XLSX from 'xlsx';
export default {
  name: "excelViewer",
  props: ['src'],
  data() {
    return { tableData: [] };
  },
  async created() {
    try {
      const response = await fetch(this.src);
      const arrayBuffer = await response.arrayBuffer();
      const workbook = XLSX.read(arrayBuffer);
      const sheetName = workbook.SheetNames[0];
      const sheet = workbook.Sheets[sheetName];
      this.tableData = XLSX.utils.sheet_to_json(sheet);
    } catch (error) {
      console.error('解析Excel失败:', error);
    }
  }
}
</script>

<style scoped>

</style>