快捷導(dǎo)航

vue3采用xlsx庫實現(xiàn)本地上傳excel文件功能

更新時間：2025年02月24日 09:55:31 作者：阿麗塔~

這篇文章主要為大家詳細(xì)介紹了vue3如何采用xlsx庫實現(xiàn)本地上傳excel文件功能,并且前端解析為Json數(shù)據(jù),感興趣的小伙伴可以了解一下

1. 安裝依賴

首先，確保安裝了 xlsx 庫：

npm install xlsx

2. 創(chuàng)建 Vue 組件

創(chuàng)建一個 Vue 組件（如 ExcelUpload.vue），用于實現(xiàn)文件上傳和解析功能。

組件代碼：

<template>
  <div>
    <input type="file" class="file-btn hoverPointer" accept=".xls,.xlsx"

                            @change="changeExcel($event)" />
    <div v-if="tableData.length > 0">
      <table>
        <thead>
          <tr>
            <th v-for="header in headers" :key="header">{{ header }}</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(row, index) in tableData" :key="index">
            <td v-for="cell in row" :key="cell">{{ cell }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';
import * as XLSX from 'xlsx';

export default {
  setup() {
    const headers = ref([]);
    const tableData = ref([]);

    const changeExcel= (event) => {

        const files = e.target.files

        if (files.length <= 0) {

            return false

        } else if (!/\.(xls|xlsx)$/.test(files[0].name.toLowerCase())) {

            console.log('上傳格式不正確，請上傳xls或者xlsx格式')

            return false

        }

      const reader = new FileReader();
      reader.onload = (e) => {
        const data = e.target.result;
        const workbook = XLSX.read(data, { type: 'binary' });
        const sheetName = workbook.SheetNames[0];
        const worksheet = workbook.Sheets[sheetName];
        const json = XLSX.utils.sheet_to_json(worksheet, { header: 1 });

        headers.value = json[0]; // 表頭
        tableData.value = json.slice(1); // 表格數(shù)據(jù)
      };
      reader.readAsBinaryString(files);
    };

    return {
      headers,
      tableData,
      handleFileUpload,
    };
  },
};
</script>

<style scoped>
table {
  width: 100%;
  border-collapse: collapse;
}
th, td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
}
</style>

3. 使用組件

在主應(yīng)用文件（如 App.vue）中引入并使用該組件：

<template>
  <div id="app">
    <ExcelUpload />
  </div>
</template>

<script>
import ExcelUpload from './components/ExcelUpload.vue';

export default {
  name: 'App',
  components: {
    ExcelUpload,
  },
};
</script>