前端解析excel表格

需求如下：

前端拿到表格中的數據，對數據做以下判斷，並將拿到的數據轉換成以下json格式，傳給后端。

具體實現：

1. 下載npm包：npm install xlsx --save
2. 在vue文件中引入依賴：import XLSX from "xlsx"
3. 使用iviewui中的上傳組件：

         <Upload class="row-mgr"
                 :before-upload="handleUpload" accept=".xls" :show-upload-list="false"
                 action="">
           <Button icon="ios-cloud-upload-outline">批量導入</Button>
         </Upload>

4. js解析文件及對解析的數據進行處理：

       <script>
       import XLSX from "xlsx"
       export default {
           name: "deviceImport",
           props: ['deviceTypes'],
           data() {
               return {
                   deviceTypesArry: []
               }
           },
           computed: {},
           methods: {
               // 獲取excel第一行的內容獲取表頭
               getList1(wb){
                   let wbData = wb.Sheets[wb.SheetNames[0]]; // 讀取的excel單元格內容
                   let re = /^[A-Z]1$/; // 匹配excel第一行的內容
                   let arr1 = [];
                   for (let key in wbData) { // excel第一行內容賦值給數組
                       if (wbData.hasOwnProperty(key)) {
                           if (re.test(key)) {
                               arr1.push(wbData[key].w);
                           }
                       }
                   }
                   return arr1;
               },
               // 增加對應字段空白內容
               AddXlsxData(xlsxData, list1){
                   let addData = null; // 空白字段替換值
                   console.log(xlsxData)
                   for (let i = 0; i < xlsxData.length; i++) { // 要被JSON的數組
                       for (let j = 0; j < list1.length; j++) { // excel第一行內容
                           if (!xlsxData[i][list1[j]]) {
                               xlsxData[i][list1[j]] = addData;
                           }
                       }
                   }
                   return xlsxData;
               },
               handleUpload (file) {
                   this.file = file;
                   let fileend = file.name.substring(file.name.lastIndexOf("."))
                   let isExcel = (fileend === '.xls' || file.type === 'application/vnd.ms-excel')
                   if (!isExcel) {
                       this.$Message.error('您只能上傳.xls格式的文件!')
                       return
                   }
                   const fileReader = new FileReader()
                   fileReader.onload = (ev) => {
                       try {
                           const data = ev.target.result
                           const workbook = XLSX.read(data, {
                               type: 'binary' // 以字符編碼的方式解析
                           })
                           const exlname = workbook.SheetNames[0] // 取第一張表
                           let exl = XLSX.utils.sheet_to_json(workbook.Sheets[exlname]) // 生成json表格內容
   
                           const list1 = this.getList1(workbook);
                           // debugger
                           exl = this.AddXlsxData(exl, list1);
                           const name_null = exl.filter(function (item) {
                               if ((!item.name || item.name == '')||(!item.type || item.type == '')) {
                                   return item
                               }
                           })
                           if(name_null.length!==0){
                               this.$Message.error('name和type都不能為空，請檢查表格內的數據')
                               return
                           }
                           const _type = exl.filter((item) => {
                               if (this.deviceTypesArry.indexOf(item.type) != -1) {
                                   return item
                               }
                           })
                           //deviceTypes   判斷表格中的 type必須包含在系統中的type（左上角下拉框）不能隨便填
                           if (_type.length !== exl.length) {
                               this.$Message.error('type的值必須是包含在系統中的type，請檢查表格內的數據')
                               return
                           }
                           const jsonPrams = exl.map(item => {
                               const obj = {
                                   name: item.name,
                                   type: item.type,
                                   label: item.label,
                                   token: item.token,
                                   additionalInfo: {
                                       gateway: item.gateway == true || item.gateway == 'TRUE' ? true : false,
                                       description: item.description
                                   }
                               }
                               return obj
                           })
                           console.log(jsonPrams)
                       } catch (e) {
                           console.log('出錯了：：')
                           return false
                       }
                   }
                   fileReader.readAsBinaryString(file)
                   return isExcel;
               },
   
           },
           mounted: function () {
               //先提取 deviceTypes中所有的type值
               this.deviceTypesArry = this.deviceTypes.map(item => {
                   return item.type
               })
           }
       }
   </script>

   打印結果：