实现前端导入xlsx文件，js获取到导入内容

前言

项目需要涉及到批量导入数据，因导入的数据只在表单内部，还未涉及到存储到后端，所以需要实现一个纯前端的xlxs的导入功能。

由于我使用的是elementui框架，所以针对el-upload做一个记录。

实现：

yarn add XLSX --save //先安装XLSX插件

 <el-upload class="upload-btn" ref="upload"  action="" accept=".xlsx"  on-change="handleFileChange"/>

<button @click="onOk" :disabled="!uploadFile">开始上传</button>

// 上传文件后，就将uploadFile赋上值

function handleFileChange(file: any, fileList: any) {

    this.uploadFile = file

}

// 点击开始上传按钮后，开始操作已上传的文件流

function onOk(){    

      // 导入的文件流

       let file = uploadRef.uploadFiles[0].raw

       // 开始读取导入的文件

       const reader = new FileReader()

       reader.readAsBinaryString(file)