vue预览二进制excel的方法

可以使用第三方库`file-saver`和`xlsx`来实现预览二进制excel文件。具体步骤如下：

1. 安装`file-saver`和`xlsx`库。

npm install file-saver xlsx

2. 在Vue组件中引入`file-saver`和`xlsx`库。

import { saveAs } from 'file-saver';
import XLSX from 'xlsx';

3. 定义一个方法来读取二进制excel文件。

readFile(file) {
  const reader = new FileReader();
  reader.onload = (e) => {
    const data = e.target.result;
    const workbook = XLSX.read(data, { type: 'binary' });
    const sheetNames = workbook.SheetNames;
    const worksheet = workbook.Sheets[sheetNames[0]];
    const excelData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
    // 处理excel数据...
  };
  reader.readAsBinaryString(file);
},

4. 在模板中添加一个文件选择器和一个预览按钮。

<input type="file" @change="onFileChange">
<button @click="previewExcel">预览</button>

5. 实现文件选择器和预览按钮的相关方法。

onFileChange(e) {
  this.file = e.target.files[0];
},
previewExcel() {
  if (this.file) {
    this.readFile(this.file);
  }
},

6. 处理读取到的excel数据，例如将数据渲染到表格中。

<table>
  <thead>
    <tr>
      <th v-for="(item, index) in excelData[0]" :key="index">{{ item }}</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="(item, index) in excelData.slice(1)" :key="index">
      <td v-for="(value, i) in item" :key="i">{{ value }}</td>
    </tr>
  </tbody>
</table>

完整代码示例：

<template>
  <div>
    <input type="file" @change="onFileChange">
    <button @click="previewExcel">预览</button>
    <table v-if="excelData">
      <thead>
        <tr>
          <th v-for="(item, index) in excelData[0]" :key="index">{{ item }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in excelData.slice(1)" :key="index">
          <td v-for="(value, i) in item" :key="i">{{ value }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import { saveAs } from 'file-saver';
import XLSX from 'xlsx';

export default {
  data() {
    return {
      file: null,
      excelData: null,
    };
  },
  methods: {
    onFileChange(e) {
      this.file = e.target.files[0];
    },
    readFile(file) {
      const reader = new FileReader();
      reader.onload = (e) => {
        const data = e.target.result;
        const workbook = XLSX.read(data, { type: 'binary' });
        const sheetNames = workbook.SheetNames;
        const worksheet = workbook.Sheets[sheetNames[0]];
        const excelData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
        this.excelData = excelData;
      };
      reader.readAsBinaryString(file);
    },
    previewExcel() {
      if (this.file) {
        this.readFile(this.file);
      }
    },
  },
};
</script>