完成导入Excel组件，并封装好相应函数

Author: baimingxuan

src/utils/excel.js

@@ -40,7 +40,7 @@ function s2ab (s) {
 }
 
 // 导出EXCEL表格
-export function exportDataFromExcel (
+export function exportDataToExcel (
   {
     header, // 表头名数组
     key, // 列对应字段数组
@@ -73,6 +73,39 @@ export function exportDataFromExcel (
   }), `${fileName}.${bookType}`)
 }
 
+// 从Excel文件中获取表格头
+function getHeaderRow (sheet) {
+  const headers = []
+  // 将 A1:G8 这种字符串转换为行列对象
+  const range = XLSX.utils.decode_range(sheet['!ref'])
+  let C
+  const R = range.s.r
+  // 从第一列开始，遍历范围中的每一列
+  for (C = range.s.c; C <= range.e.c; ++C) {
+    // 将行列对象转换为 A1 这种字符串
+    const cell = sheet[XLSX.utils.encode_cell({ c: C, r: R })]
+    // 用默认值替换
+    let hdr = 'UNKNOWN ' + C
+    if (cell && cell.t) hdr = XLSX.utils.format_cell(cell)
+    headers.push(hdr)
+  }
+  return headers
+}
+
+// 读取Excel文件
+export function readDataFromExcel (data, type) {
+  // 读取Excel文件并保存到Workbook对象
+  const workbook = XLSX.read(data, { type: type })
+  const firstSheetName = workbook.SheetNames[0]
+  // 获取Workbook对象的worksheet
+  const worksheet = workbook.Sheets[firstSheetName]
+  const header = getHeaderRow(worksheet)
+  // 将worksheet转化成数组
+  const results = XLSX.utils.sheet_to_json(worksheet)
+  return { header, results }
+}
+
 export default {
-  exportDataFromExcel
+  exportDataToExcel,
+  readDataFromExcel
 }

src/views/excel/ImportExcel.vue

@@ -7,22 +7,45 @@
         <p>github地址：访问 <el-link type="success" href="https://github.com/SheetJS/sheetjs" target="_blank">JS-xlsx</el-link></p>
       </template>
     </Hints>
+    <el-card shadow="always">
+      <UploadExcel @on-success="handleSuccess"/>
+      <el-table
+        :data="tableData"
+        tooltip-effect="dark"
+        style="width: 100%"
+        size="medium">
+        <el-table-column v-for="item in tableHeader" :key="item" :prop="item" :label="item" align="center"/>
+      </el-table>
+    </el-card>
   </div>
 </template>
 
 <script>
+import UploadExcel from '../../components/UploadExcel'
 import Hints from '../../components/Hints/index'
 
 export default {
   name: 'ImportExcel',
-  components: { Hints }
+  data () {
+    return {
+      tableHeader: [],
+      tableData: []
+    }
+  },
+  components: { UploadExcel, Hints },
+  methods: {
+    handleSuccess ({ header, results }) {
+      this.tableHeader = header
+      this.tableData = results
+    }
+  }
 }
 </script>
 
 <style lang="less">
 .import-excel-wrapper {
   .el-card{
-    min-height: 500px;
+    min-height: 400px;
   }
   .search-form {
     padding-top: 18px;