批量导入封装

source/_posts/Vue+Element项目的批量导入组件封装.md

+---
+title: Vue+Element项目的批量导入组件封装           
+date: 2022/6/30 18:42:20
+tags:                    
+- 前端
+- 批量导入
+- JavaScript             
+author: 李燕         
+---
+
+Excel导入、Excel导出是一对好兄弟，经常成双成对出现。所以，在封装了Excel导出方法 —— 《用xlsx-style玩转Excel导出——拿走即用的Excel导出方法封装》后，今天我们来封装一下Excel导入。
+
+Excel导入的封装和Excel导出的封装不太一样，Excel导出是纯js封装的，但是Excel导入的封装可能是组件级别的封装。
+
+<!-- more -->
+
+**一、 安装依赖**
+ 
+ 
+在正式开始封装之前，我们需要先安装xlsx。这个插件，能够方面我们将导入的文件，处理成我们需要的数据。
+
+```js
+npm install -S xlsx
+```
+安装后，在需要使用的地方引入即可。
+
+```js
+import XLSX from 'xlsx'
+```
+
+**二、上传文件**
+
+因所做的涉及到Excel批量导入的项目，都是基于Vue+Element的，所以直接选用了Element的el-upload组件实现文件上传功能，如下：
+
+```js
+// BatchImport.vue
+
+<template>
+
+  <el-upload
+  action="#"
+  accept=".xls,.xlsx"
+  :show-file-list="false"
+  :auto-upload="true"
+  :multiple="false"
+  :http-request="handleBatchImport"
+>
+  <el-button size="small" type="primary">批量导入</el-button>
+ </el-upload>
+
+</template>
+
+```
+
+**三、处理文件**
+
+文件上传后，我们获取到导入的Excel文件，然后进行如下处理：
++  通过new FileReader()读取文件
++ 将读取结果通过XLSX.read()方法转换成工作簿对象
++ 处理工作簿对象，获取有效的目标数据
+
+```js
+// BatchImport.vue
+
+<script>
+import XLSX from 'xlsx'
+  export default { 
+    name: 'BatchImport',
+    methods: {
+      handleBatchImport(file) {
+        const that = this
+        // 通过FileReader对象读取文件
+        const fileReader = new FileReader();
+        fileReader.onload = (event) => { 
+          try {
+            const { result } = event.target;
+            // 以二进制流方式读取得到整份excel表格对象
+            const workbook = XLSX.read(result, { type: "binary" });
+            // 存储获取到的数据
+            const excelData = {};
+            // 遍历获取每张工作表 除去隐藏表
+            const allSheets = workbook.Workbook.Sheets;
+            allSheets.forEach( item => {
+              const name = item.name;
+              if (workbook.Sheets.hasOwnProperty(name) && item.Hidden === 0) {
+                // 利用 sheet_to_json 方法将 excel 转成 json 数据
+                const data = [].concat(
+                  XLSX.utils.sheet_to_json(workbook.Sheets[name])
+                ); 
+                // 处理表格有效内容后面的空格行,获得有效数据  
+                excelData[name] = that.handleEmptyRow(data)
+              }
+            })
+            //将excelData暴露出去
+            that.$emit('importExcel', excelData)
+          } catch(e) {
+            that.$message.error('文件上传错误！')
+            that.$emit('importExcel', null)
+            return false
+          }
+        }
+        //以二进制方式打开文件
+        fileReader.readAsBinaryString(file.file);
+      },
+    
+      // 处理表格空行问题
+      handleEmptyRow(data) {
+        // 去除最后的空格行
+        for (let i = data.length - 1; i >= 0; i--) {
+          // 判断数组是否全为空
+          const flag = Object.values(data[i]).find((item) => {
+            return String(item).replace(/(^s*)|(s*$)/g, '').length
+          })
+          if (!flag) {
+            data.splice(i, 1)
+          } else {
+            break
+          }
+        }
+        return data
+      },
+    }
+  }
+</script>
+```
+
+**四、处理数据**
+
+经过上述步骤，我们获取到目标数据，接下来，在父组件里对数据进行进一步处理和操作。
+
+
+```js
+// Father.vue
+
+<template>
+  <batch-import @importExcel="importExcel"></batch-import>
+</template>
+
+<script>
+import BatchImport from './BatchImport.vue'
+  export default { 
+    components: {
+      BatchImport,
+    },
+    methods: {
+      importExcel(excelData) {
+        ...
+    
+      }
+    }
+  }
+</script>
+
+```
+因数据具体如何处理，需要根据项目需求和后端要求而定，所以未将数据在BatchImport组件内进行处理，而是选择暴露出来在父组件内处理。
+
+