通過Vue實現Excel文件的上傳和預覽功能

更新時間：2025年04月21日 09:02:36 作者：碼上有潛

在業(yè)務系統中,Excel 文件作為一種常用的數據存儲和傳輸格式,經常需要被處理和展示,這篇文章將講解如何通過 Vue 和 xlsx.js 實現 Excel 文件的上傳和預覽功能,需要的朋友可以參考下

1. 引言：為什么在 Vue 中處理 Excel 文件

在現代 web 應用中，數據展示和處理是常見的需求，尤其在業(yè)務系統中，Excel 文件作為一種常用的數據存儲和傳輸格式，經常需要被處理和展示。在 Vue 應用中，使用第三方庫如 xlsx.js 可以方便地實現 Excel 文件的讀取和解析，并將其展示在前端。這篇文章將講解如何通過 Vue 和 xlsx.js 實現 Excel 文件的上傳和預覽功能。

2. 安裝和初步設置

安裝 xlsx 庫

在 Vue 項目中，xlsx 庫是一個流行的用于處理 Excel 文件的工具。它支持多種 Excel 文件格式，包括 .xlsx 和 .xls，并能夠將 Excel 轉換為 JSON 格式，方便處理和展示。

執(zhí)行以下命令安裝 xlsx：

npm install xlsx

使用 xlsx 的基本工作原理

xlsx 庫提供了讀取和解析 Excel 文件的功能，核心步驟如下：

讀取文件：使用 FileReader 讀取上傳的文件。
解析 Excel 文件：通過 XLSX.read 方法將 Excel 文件內容解析為可操作的數據結構。
轉換為 JSON：使用 XLSX.utils.sheet_to_json 將 Excel 文件的工作表轉換為 JSON 格式，便于渲染。

3. 實現 Excel 文件的上傳與解析

現在我們擴展實現一個 Vue 組件，可以處理用戶上傳的 Excel 文件，并將解析后的內容顯示在頁面上。

代碼實現：

<template>
  <div>
    <h2>Excel 文件預覽</h2>
    <input type="file" @change="handleFileUpload" accept=".xlsx, .xls" />
    <div v-if="error">{{ error }}</div>
    <table v-if="excelData.length">
      <thead>
        <tr>
          <th v-for="(header, index) in excelData[0]" :key="index">{{ header }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(row, rowIndex) in excelData.slice(1)" :key="rowIndex">
          <td v-for="(cell, cellIndex) in row" :key="cellIndex">{{ cell }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

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

export default {
  data() {
    return {
      excelData: [], // 存儲 Excel 數據
      error: null // 存儲錯誤信息
    };
  },
  methods: {
    handleFileUpload(event) {
      const file = event.target.files[0];
      if (!file) {
        this.error = "請上傳一個有效的文件";
        return;
      }

      const fileExtension = file.name.split('.').pop().toLowerCase();
      if (['xlsx', 'xls'].indexOf(fileExtension) === -1) {
        this.error = "不支持的文件格式，請上傳 .xlsx 或 .xls 文件";
        return;
      }

      this.error = null; // 清除錯誤信息
      const reader = new FileReader();
      reader.onload = (e) => {
        try {
          const data = new Uint8Array(e.target.result);
          const workbook = XLSX.read(data, { type: "array" });
          const firstSheetName = workbook.SheetNames[0];
          const worksheet = workbook.Sheets[firstSheetName];
          const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
          this.excelData = jsonData;
        } catch (error) {
          this.error = "解析文件失敗，請檢查文件內容是否正確";
        }
      };
      reader.readAsArrayBuffer(file);
    }
  }
};
</script>

功能細節(jié)：

錯誤處理：檢查上傳的文件類型是否為 Excel 文件，并在上傳非 Excel 文件時給出提示。
文件讀取與解析：通過 FileReader 和 XLSX.read 讀取 Excel 數據，并通過 XLSX.utils.sheet_to_json 將其轉換為 JSON 數組。
表格渲染：將 Excel 中的內容通過 Vue 的 v-for 指令渲染成一個表格，表頭為 Excel 第一行內容。

4. 優(yōu)化：大文件處理與分頁顯示

對于較大的 Excel 文件，直接顯示所有數據可能會導致性能問題。為了解決這個問題，可以通過分頁來優(yōu)化性能。

實現分頁功能：

<template>
  <div>
    <h2>Excel 文件預覽</h2>
    <input type="file" @change="handleFileUpload" accept=".xlsx, .xls" />
    <div v-if="error">{{ error }}</div>
    <table v-if="excelData.length">
      <thead>
        <tr>
          <th v-for="(header, index) in excelData[0]" :key="index">{{ header }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(row, rowIndex) in paginatedData" :key="rowIndex">
          <td v-for="(cell, cellIndex) in row" :key="cellIndex">{{ cell }}</td>
        </tr>
      </tbody>
    </table>
    <div v-if="totalPages > 1">
      <button @click="prevPage" :disabled="currentPage === 1">上一頁</button>
      <button @click="nextPage" :disabled="currentPage === totalPages">下一頁</button>
    </div>
  </div>
</template>

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

export default {
  data() {
    return {
      excelData: [],
      currentPage: 1,
      pageSize: 10,
      error: null
    };
  },
  computed: {
    totalPages() {
      return Math.ceil((this.excelData.length - 1) / this.pageSize);
    },
    paginatedData() {
      const start = (this.currentPage - 1) * this.pageSize + 1;
      const end = start + this.pageSize;
      return this.excelData.slice(start, end);
    }
  },
  methods: {
    handleFileUpload(event) {
      const file = event.target.files[0];
      if (!file) {
        this.error = "請上傳一個有效的文件";
        return;
      }

      const fileExtension = file.name.split('.').pop().toLowerCase();
      if (['xlsx', 'xls'].indexOf(fileExtension) === -1) {
        this.error = "不支持的文件格式，請上傳 .xlsx 或 .xls 文件";
        return;
      }

      this.error = null;
      const reader = new FileReader();
      reader.onload = (e) => {
        try {
          const data = new Uint8Array(e.target.result);
          const workbook = XLSX.read(data, { type: "array" });
          const firstSheetName = workbook.SheetNames[0];
          const worksheet = workbook.Sheets[firstSheetName];
          const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
          this.excelData = jsonData;
          this.currentPage = 1; // 重置分頁
        } catch (error) {
          this.error = "解析文件失敗，請檢查文件內容是否正確";
        }
      };
      reader.readAsArrayBuffer(file);
    },
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++;
      }
    },
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--;
      }
    }
  }
};
</script>

5. 高級功能擴展

可以為此功能擴展更多實用的功能：

Excel 文件多工作表支持：用戶可能上傳含有多個工作表的 Excel 文件，支持用戶選擇不同的工作表來預覽。
導出為 Excel：在處理 Excel 數據后，提供導出功能，讓用戶可以將數據再導出為 Excel 文件。
數據篩選與排序：為表格提供簡單的篩選與排序功能，提升用戶體驗。

多工作表支持：

使用 XLSX.SheetNames 可以獲取 Excel 中所有工作表的名稱，用戶可以選擇需要查看的工作表。

<select v-if="workbook.SheetNames.length" v-model="selectedSheet" @change="loadSheet">
  <option v-for="(sheet, index) in workbook.SheetNames" :key="index" :value="sheet">{{ sheet }}</option>
</select>