胖蔡说技术Excel导入、Excel导出是一对好兄弟，经常成双成对出现。所以，在封装了Excel导出方法 —— 《用xlsx-style玩转Excel导出——拿走即用的Excel导出方法封装》后，今天我们来封装一下Excel导入。
Excel导入的封装和Excel导出的封装不太一样，Excel导出是纯js封装的，但是Excel导入的封装可能是组件级别的封装。
一、 安装依赖
在正式开始封装之前，我们需要先安装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组件内进行处理，而是选择暴露出来在父组件内处理。
