vue 前端导入excel解析出Json，xlsx解析excel

今天接到一个需求，导入excel查询

看起来不难，文件传后端就行，但是要分页，没法做到点击下一页时候再传一次{ 文件，pageNum,pageSize }的。因为没法缓存的了文件（起码很麻烦）
————那么我们解析出来，直接传参数给后端就好了————

xlsx.js

引入：

npm i xlsx 
import XLSL from 'xlsx'

html:

       <input type="file" @change="readWorkbookFromLocalFile"  >

js:

readexcel(e) {
    
    
   		//表格导入
       const files = e.target.files;
       const fileReader = new FileReader();
       fileReader.onload = ev => {
    
    
           try {
    
    
               const data = ev.target.result;
               const workbook = XLSX.read(data, {
    
    
                   type: "binary"
               });
               //取第一张表,不懂就看excel左下角
               const wsname = workbook.SheetNames[0]; 
               const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]); //生成json表格内容
               let toJson = ws// 转化成功的json
               
               //----------在这上面都可以直接复制----------

				//数据构造
               let excelJson=[]
               toJson.map(x=> {
    
    
                   excelJson.push(x['用户ID'])
               })
               this.$message.success("导入成功，正在查询")
               console.log(excelJson)
               
           } catch (e) {
    
    
               this.$message.error("导入失败")
               return false;
           }
       };
       fileReader.readAsBinaryString(files[0]);
   },

看看效果：

每行数据就对应一个数组对象

我构造数据后

ps:

1.这个html有点丑，自己想办法优化样式吧
2.这个插件支持.xls 和 .xlsx 两种格式
3.兼容性