胖蔡叨叨叨
你听我说

Vue+Element项目的批量导入组件封装

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组件内进行处理,而是选择暴露出来在父组件内处理。

—— 本文结束,感谢您的
赞(0) 打赏
转载请附上原文出处链接:胖蔡叨叨叨 » Vue+Element项目的批量导入组件封装
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏