使用element实现导入execl表格的功能

现如今后台管理项目中越来越人性化，文件上传，文件的下载（主页中都有）表格的导入和导出。

今天给大家搞个前后端联调的导入表格的功能，废话不多说，咱直接上代码吧！！！！

代码后面有对代码的解析，方便大家根据自己的需求进行行对的调整。

   <template slot="menuLeft" >
         <el-button
              type="warning"
              icon="el-icon-folder-add">
          <el-upload
            :on-change="fileonChange"
            style="float: right;"
            :auto-upload="false"
            :show-file-list="false"
             accept=".xls, .xlsx"
             ref="upload"
            :multiple="true">
            导入
          </el-upload>
          </el-button>
       </template>

2。通过第三方插件

1.npm install xlsx? 通过这个命令进行按照。

2.const XLSX = require('xlsx');? ?在需要的页面进行引入

 //初始化导入
       initalizeImport(file){
         let that = this;
         if (!file) {
             //如果没有文件
             return false;
         } else if (!/.(xls|xlsx)$/.test(file.name.toLowerCase())) {
             this.$message.error("上传格式不正确，请上传xls或者xlsx格式");
             return false;
         }
         const fileReader = new FileReader();
         fileReader.onload = async (ev) => {
             try {
                 const data = ev.target.result;
                 const workbook = XLSX.read(data, {
                     type: "binary",
                 });

                 const wsname = workbook.SheetNames[0]; //导入excel的第一张表
                 // 导入的信息
                 const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]); //生成json表格内容
                 let params = [];
                 //如果一行表头，则i从0开始，如果是两行则从1开始以此类推
                 for (var i = 0; i < ws.length; i++) {
                    let one = ws[i]["发件人"] || "默认值";  // 如果表格中该字段为空，则设置默认值
                    let two= ws[i]["联系电话"] || "17343824899"; // 如果表格中该字段为空，则设置默认值
                    let three = ws[i]["电子邮箱"] || "2982543375@qq.com"; // 如果表格中该字段为空，则设置默认值
                    let four = ws[i]["收货地址"] || "佳木斯"; // 如果表格中该字段为空，则设置默认值
                    let five= ws[i]["发货地址"] || "	中国"; // 如果表格中该字段为空，则设置默认值
                    let six= ws[i]["收件人"] || "中国"; // 如果表格中该字段为空，则设置默认值
                    let serve= ws[i]["商铺名称"] || "自营";// 如果表格中该字段为空，则设置默认值
                    let eight= ws[i]["中间商"] || "校长"; // 如果表格中该字段为空，则设置默认值
                    let nine= ws[i]["客服"] || "WC"; // 如果表格中该字段为空，则设置默认值
                    let ten= ws[i]["备注"] || "结束";  // 如果表格中该字段为空，则设置默认值
                     let sheetData = {
                         // 键名为绑定 el 表格的关键字，值则是 ws[i][对应表头名]
                         one: one,
                         two: two,
                         three: three,
                         four: four,
                         five:five,
                         six:six,
                         serve:serve,
                         eight:eight,
                         nine: nine,
                         ten:ten
                     };

                     params.push(sheetData)
                 }

                 const yitang = workbook.SheetNames[1];
                 const yt = XLSX.utils.sheet_to_json(workbook.Sheets[yitang]);
                let one = yt[i]["发件人"] || "默认值";  // 如果表格中该字段为空，则设置默认值
                    let two= yt[i]["联系电话"] || "17343824899"; // 如果表格中该字段为空，则设置默认值
                    let three = yt[i]["电子邮箱"] || "2982543375@qq.com"; // 如果表格中该字段为空，则设置默认值
                    let four = yt[i]["收货地址"] || "佳木斯"; // 如果表格中该字段为空，则设置默认值
                    let five= yt[i]["发货地址"] || "	中国"; // 如果表格中该字段为空，则设置默认值
                    let six= yt[i]["收件人"] || "中国"; // 如果表格中该字段为空，则设置默认值
                    let serve= yt[i]["商铺名称"] || "自营";// 如果表格中该字段为空，则设置默认值
                    let eight= yt[i]["中间商"] || "校长"; // 如果表格中该字段为空，则设置默认值
                    let nine= yt[i]["客服"] || "WC"; // 如果表格中该字段为空，则设置默认值
                    let ten= yt[i]["备注"] || "结束";  // 如果表格中该字段为空，则设置默认值
                     let sheetData = {
                         // 键名为绑定 el 表格的关键字，值则是 ws[i][对应表头名]
                         one: one,
                         two: two,
                         three: three,
                         four: four,
                         five:five,
                         six:six,
                         serve:serve,
                         eight:eight,
                         nine: nine,
                         ten:ten
                     };

                     params.push(sheetData)
                 }
                  // 这里是走的后端接口
                 inital(params).then(res=>{
                   this.$message({
                       message: "导入数据表格成功",
                       showClose: true,
                       type: "success",
                   });
                    this.onLoad(this.page)
                 })
             } catch (e) {
               this.$message({
                   message: "导入数据表格失败"+e,
                   showClose: true,
                   type: "error",
               });
                 return false;
             }
         };
         // 如果为原生 input 则应是 files[0]
         fileReader.readAsBinaryString(file.raw);

       },
       fileonChange(file,fileList){
         this.initalizeImport(file)
       },

它首先检查上传的文件是否符合要求（必须为 xls 或 xlsx 格式），然后使用 FileReader 对象读取文件内容，并利用 js-xlsx 库将 Excel 表格转化为 JSON 格式。最后，它遍历 JSON 数据，并将每行数据封装成一个对象放入数组中，最终完成数据的导入。需要根据实际情况进行调整。

第一层循环代码的意思是

这段代码是遍历导入的 Excel 表格中的数据，并将每一行数据封装成一个对象，然后将该对象添加到名为 params 的数组中。具体来说，代码通过循环遍历 ws 数组（即导入的 Excel 数据转换后的 JSON 数组），在每次循环的过程中，根据表头名称将对应的值赋给新创建的对象的相应属性。同时，它也会判断是否存在规格型号的值，如果存在，则将该值赋给 specs 属性。最后，将创建的对象添加到 params 数组中。第二层也是。