vue3 excel预览

在Vue 3中进行Excel文件预览可以使用`xlsx`库来实现。`xlsx`是一个流行的JavaScript库，用于读取和处理Excel文件。

首先，安装`xlsx`库：

npm install xlsx

然后，在Vue组件中引入并使用该库：

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th v-for="header in headers" :key="header">{{ header }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="row in rows" :key="row">
          <td v-for="cell in row" :key="cell">{{ cell }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import * as XLSX from 'xlsx';

export default {
  data() {
    return {
      headers: [],
      rows: []
    };
  },
  mounted() {
    // 读取Excel文件
    const fileReader = new FileReader();
    fileReader.onload = (e) => {
      const data = new Uint8Array(e.target.result);
      const workbook = XLSX.read(data, { type: 'array' });
      const worksheet = workbook.Sheets[workbook.SheetNames[0]];
      
      // 获取表头
      const header = [];
      for (let key in worksheet) {
        if (key[0] === '!') continue;
        const col = key.replace(/\d/g, '');
        if (!header.includes(col)) {
          header.push(col);
        }
      }
      
      // 获取数据行
      const rows = [];
      for (let i = 1; i <= XLSX.utils.decode_range(worksheet['!ref']).e.r; i++) {
        const row = [];
        for (let j = 0; j < header.length; j++) {
          const cell = worksheet[header[j] + i];
          row.push(cell ? cell.v : '');
        }
        rows.push(row);
      }
      
      this.headers = header;
      this.rows = rows;
    };
    
    // 选择Excel文件
    const input = document.createElement('input');
    input.type = 'file';
    input.accept = '.xlsx, .xls';
    input.addEventListener('change', (e) => {
      const file = e.target.files[0];
      if (file) {
        fileReader.readAsArrayBuffer(file);
      }
    });
    
    input.click();
  }
};
</script>

以上代码中，使用了`xlsx`库的`read()`方法来读取Excel文件，然后解析表头和数据行，并将其分别赋值给`headers`和`rows`进行展示。

请注意，由于浏览器的安全限制，无法在前端直接读取本地文件系统上的文件。因此，我们通过创建一个`<input>`元素来选择Excel文件，并使用`FileReader`对象来读取文件内容。

这个示例仅提供了简单的Excel文件预览功能，对于复杂的Excel文件、合并单元格、样式等，可能需要使用其他更复杂的库或服务。