vue 上传excel文件及展现

在Vue中上传Excel文件并展现数据可以通过以下步骤实现：

1. **创建文件上传组件**：
使用Vue的`<input type="file">`元素来选择Excel文件。

2. **使用XLSX库解析Excel文件**：
通过引入XLSX库，可以将Excel文件解析为JSON格式的数据。

3. **展示数据**：
使用Vue的`v-for`指令将解析后的数据渲染到表格中。

下面是一个简单的示例：

1. **安装XLSX库**：

   npm install xlsx

2. **创建Vue组件**：

   <template>
     <div>
       <input type="file" @change="handleFileChange" />
       <table border="1">
         <tr>
           <th v-for="(header, index) in headers" :key="index">{{ header }}</th>
         </tr>
         <tr v-for="(row, rowIndex) in data" :key="rowIndex">
           <td v-for="(cell, cellIndex) in row" :key="cellIndex">{{ cell }}</td>
         </tr>
       </table>
     </div>
   </template>

   <script>
   import XLSX from 'xlsx';

   export default {
     data() {
       return {
         data: [],
         headers: []
       };
     },
     methods: {
       handleFileChange(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 firstSheetName = workbook.SheetNames[0];
           const worksheet = workbook.Sheets[firstSheetName];
           const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });

           this.headers = jsonData[0];
           this.data = jsonData.slice(1);
         };

         reader.readAsArrayBuffer(file);
       }
     }
   };
   </script>

   <style scoped>
   table {
     width: 100%;
     border-collapse: collapse;
     margin-top: 20px;
   }
   th, td {
     padding: 8px;
     text-align: left;
   }
   </style>

这个示例中，我们首先通过`<input type="file">`元素选择Excel文件，然后在`handleFileChange`方法中使用FileReader读取文件内容，并使用XLSX库解析Excel文件。解析后的数据存储在`headers`和`data`中，并通过`v-for`指令渲染到表格中。