基于php+laravel+vue环境下的前端上传excel并获取数据渲染到el-table中

不念不忘少年蓝@ 2021-07-26 02:08 202阅读 0赞

1.  下载插件XLSX，[地址][Link 1]，推荐下载`xlsx.full.min.js`  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RheTcx_size_16_color_FFFFFF_t_70]
2.  在需要导入excel的文件引入
    
        <script lang="javascript" src="{ { asset('js/xlsx.full.min.js') }}"></script>
3.  使用`element-ui`的`el-upload`组件上传文件
    
        <el-upload class="upload-demo" action :on-change="handleChange" :show-file-list="true" :on-remove="handleRemove" :file-list="fileListUpload" :limit="1" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" :auto-upload="false" >
           <el-button size="small" type="primary">上传excel文件</el-button>
           <div slot="tip" class="el-upload__tip">注：只 能 上 传 xlsx / xls 文 件</div>
        </el-upload>
    
        // 导入表格-el-upload--start
        // excel表上传
        handleChange(file, fileList) { 
           this.fileTemp = file.raw;
           // 判断上传文件格式
           if (this.fileTemp) { 
               if (
                   this.fileTemp.type ==
                   "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" ||
                   this.fileTemp.type == "application/vnd.ms-excel"
               ) { 
                   this.importfxx(this.fileTemp);
               } else { 
                   this.$message({ 
                       type: "warning",
                       message: "附件格式错误，请删除后重新上传！"
                   });
               }
           } else { 
               this.$message({ 
                   type: "warning",
                   message: "请上传附件！"
               });
           }
        },
        // 移除excel表
        handleRemove(file, fileList) { 
           this.fileTemp = null;
        },
        importfxx(obj) { 
           let _this = this;
           // 通过DOM取文件数据
           this.file = obj;
           var rABS = false; //是否将文件读取为二进制字符串
           var f = this.file;
           var reader = new FileReader();
           FileReader.prototype.readAsBinaryString = function(f) { 
               var binary = "";
               var rABS = false; //是否将文件读取为二进制字符串
               var pt = this;
               var wb; //读取完成的数据
               var outdata;
               var reader = new FileReader();
               reader.onload = function(e) { 
                   var bytes = new Uint8Array(reader.result);
                   var length = bytes.byteLength;
                   for (var i = 0; i < length; i++) { 
                       binary += String.fromCharCode(bytes[i]);
                   }
                   // var XLSX = require("xlsx");
                   if (rABS) { 
                       wb = XLSX.read(btoa(fixdata(binary)), { 
                           //手动转化
                           type: "base64"
                       });
                   } else { 
                       wb = XLSX.read(binary, { 
                           type: "binary"
                       });
                   }
                   _this.tableDataBugs = [];
                   outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]); //outdata就是读取excel内容之后输出的东西
                   console.log(outdata);
                   this.da = [...outdata];
                   let arr = [];
                   this.da.map(v => { 
                       let obj = { };
                       obj.ip = v["ip"]; //ip是表的标题
                       obj.bug_title = v["标题"]; //ip是表的标题
                       obj.bug_link = v["超链接"];
                       obj.bug_status = v["状态"];
                       obj.bug_serious = v["严重程度"];
                       obj.bug_note = v["优先级"];
                       // console.log(obj)
                       arr.push(obj);
                   });
        
                   //return arr
                   // 把读取的excel表格中的内容放进tableData2中(这里要改成自己的表的名字)
                   _this.tableDataBugs = _this.tableDataBugs.concat(arr);
               };
               reader.readAsArrayBuffer(f);
           };
           if (rABS) { 
               reader.readAsArrayBuffer(f);
           } else { 
               reader.readAsBinaryString(f);
           }
        },
4.  由于项目是前后端混编的，通过npm下载插件后，在app.js引入，当在页面调用时，出现报错，只能使用在当前页面引入js的方式使用插件。

[如何使用JavaScript实现纯前端读取和导出excel文件][JavaScript_excel]

[Link 1]: https://github.com/SheetJS/sheetjs
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RheTcx_size_16_color_FFFFFF_t_70]: /images/20210725/db6df72c23cc4aefb628f3609b9ae03c.png
[JavaScript_excel]: https://www.cnblogs.com/liuxianan/p/js-excel.html