当前位置：首页 > VUE

vue实现excel上传预览

2026-01-22 15:37:01VUE

vue实现excel上传预览的方法

使用xlsx库解析Excel文件

安装xlsx库来处理Excel文件：

npm install xlsx

在Vue组件中引入xlsx库：

import * as XLSX from 'xlsx';

创建一个文件上传组件：

<input type="file" @change="handleFileUpload" accept=".xlsx, .xls" />

处理文件上传

在methods中定义handleFileUpload方法：

handleFileUpload(event) {
  const file = event.target.files[0];
  if (!file) return;

  const reader = new FileReader();
  reader.onload = (e) => {
    const data = new Uint8Array(e.target.result);
    const workbook = XLSX.read(data, { type: 'array' });
    this.previewExcel(workbook);
  };
  reader.readAsArrayBuffer(file);
}

预览Excel数据

定义previewExcel方法来显示Excel内容：

previewExcel(workbook) {
  const firstSheetName = workbook.SheetNames[0];
  const worksheet = workbook.Sheets[firstSheetName];
  const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });

  this.excelData = jsonData;
}

显示预览表格

在模板中添加表格来显示Excel数据：

<table v-if="excelData && excelData.length">
  <tr v-for="(row, rowIndex) in excelData" :key="rowIndex">
    <td v-for="(cell, cellIndex) in row" :key="cellIndex">
      {{ cell }}
    </td>
  </tr>
</table>

数据绑定

在data中定义excelData变量：

data() {
  return {
    excelData: null
  };
}

样式优化

添加CSS样式美化表格显示：

vue实现excel上传预览

table {
  border-collapse: collapse;
  width: 100%;
}
td, th {
  border: 1px solid #ddd;
  padding: 8px;
}
tr:nth-child(even) {
  background-color: #f2f2f2;
}

完整组件示例

<template>
  <div>
    <input type="file" @change="handleFileUpload" accept=".xlsx, .xls" />
    <table v-if="excelData && excelData.length">
      <tr v-for="(row, rowIndex) in excelData" :key="rowIndex">
        <td v-for="(cell, cellIndex) in row" :key="cellIndex">
          {{ cell }}
        </td>
      </tr>
    </table>
  </div>
</template>

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

export default {
  data() {
    return {
      excelData: null
    };
  },
  methods: {
    handleFileUpload(event) {
      const file = event.target.files[0];
      if (!file) return;

      const reader = new FileReader();
      reader.onload = (e) => {
        const data = new Uint8Array(e.target.result);
        const workbook = XLSX.read(data, { type: 'array' });
        this.previewExcel(workbook);
      };
      reader.readAsArrayBuffer(file);
    },
    previewExcel(workbook) {
      const firstSheetName = workbook.SheetNames[0];
      const worksheet = workbook.Sheets[firstSheetName];
      const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });

      this.excelData = jsonData;
    }
  }
};
</script>

<style>
table {
  border-collapse: collapse;
  width: 100%;
}
td, th {
  border: 1px solid #ddd;
  padding: 8px;
}
tr:nth-child(even) {
  background-color: #f2f2f2;
}
</style>