vue在线预览excel

可以使用 js-xlsx 库来实现 Vue 在线预览 Excel。首先需要安装 js-xlsx：

npm install xlsx

然后在 Vue 组件中引入 js-xlsx：

import XLSX from 'xlsx';

接着，在 Vue 组件的方法中，使用 XLSX 读取 Excel 文件并转换为 JSON 格式，然后将 JSON 数据渲染到页面上：

export default {
  data() {
    return {
      jsonData: null
    }
  },
  methods: {
    handleFileUpload(event) {
      const file = event.target.files[0];
      const reader = new FileReader();
      reader.onload = (e) => {
        const data = new Uint8Array(e.target.result);
        const workbook = XLSX.read(data, { type: 'array' });
        const sheetName = workbook.SheetNames[0];
        const sheet = workbook.Sheets[sheetName];
        const jsonData = XLSX.utils.sheet_to_json(sheet, { header: 1 });
        this.jsonData = jsonData;
      };
      reader.readAsArrayBuffer(file);
    }
  }
}

最后，在 Vue 组件的模板中，使用 v-for 循环渲染 JSON 数据：

<template>
  <div>
    <input type="file" @change="handleFileUpload">
    <table>
      <thead>
        <tr>
          <th v-for="(header, index) in jsonData[0]" :key="index">{{ header }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(row, index) in jsonData.slice(1)" :key="index">
          <td v-for="(cell, index) in row" :key="index">{{ cell }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

这样就可以实现 Vue 在线预览 Excel 文件了。