完美的Excel导入，获取表格数据-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44230635/article/details/88572796

本文详细介绍了如何使用Vue.js框架实现从Excel文件中高效地导入和获取表格数据，包括文件读取、数据解析及在前端展示的关键步骤，助你轻松处理大量数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


    
    $ npm install xlsx				// 导入模块 
    <input type="file"  ref="upload" name="file" accept=".xls,.xlsx" />

     mounted() {
		   	 this.$refs.upload.addEventListener('change', e => {//绑定监听表格导入事件
		               this.readExcel(e);
		     })
    },
    methods: {
           readExcel(e){
                        let ws, data, wsname;
                        let ws1 = "";
                        let that = this;
                        let files = e.target.files;
                        if(files.length<=0){//如果没有文件名
                              // console.log("files.length<=0")
                              return false;
                        }else if(!/\.(xls|xlsx)$/.test(files[0].name.toLowerCase())){+
                              // console.log("files.length!=0")
                              this.$Message.error('上传格式不正确，请上传xls或者xlsx格式');
                              return false;
                        }
                        const fileReader = new FileReader();                     
                        fileReader.onload = (ev) => {    
                              try {
                                    data = ev.target.result;
                                    const workbook = XLSX.read(data, {
                                          type: 'binary'
                                    });
                                    wsname = workbook.SheetNames[0];                            //取第一张表
                                    ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]);     //生成json表格内容
                                    // console.log(ws);
                                    that.outputs = [];
                                    for(var i= 0;i<ws.length;i++){
                                          var sheetData = {
                                                address: ws[i].addr,
                                                value: ws[i].value
                                          }
                                          that.outputs.push(sheetData);
                                    }
                                    this.$refs.upload.value = '';
                              }catch(e){console.log(e)}
                        }
                        fileReader.readAsBinaryString(files[0]);

                let param = new FormData();         //创建form对象
				param.append('file', files[0]);     //通过append向form对象添加数据
				let config = {                      //添加请求头
					headers: {'Content-Type': 'multipart/form-data'}
				}; 
				OrderServices.ordImport(param, config).then(rs => {          
                                 if(rs.status==1) { 
                                    this.$Message.success('分配成功'); 
                                    this.goosList(this.searchForm);
                                    this.states();  
                              }
                        })
                  },               
 			}