成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

VUE中導(dǎo)入excel文件

GeekGhc / 1067人閱讀

摘要：實現(xiàn)的效果如下圖參考文獻(xiàn)網(wǎng)址安裝依賴引入結(jié)構(gòu)入庫入庫日期選擇日期導(dǎo)入取消確定中的數(shù)據(jù)光貓導(dǎo)入中獲取當(dāng)前時間并賦值給入庫日期入庫日期發(fā)生變化保存到中關(guān)閉模態(tài)框清除數(shù)據(jù)如果沒有文件

實現(xiàn)的效果如下圖

參考文獻(xiàn)網(wǎng)址: https://blog.csdn.net/qq_3900...
https://blog.csdn.net/liyi_mo...

安裝依賴

npm install xlsx --save

引入

import XLSX from "xlsx"
Vue.prototype.XLSX = XLSX

結(jié)構(gòu)


      
      
        
          
        

            
                 導(dǎo)入
            
          

      

      

        取 消
        確 定

data中的數(shù)據(jù)

gmDrform:{storageTime:""},//光貓導(dǎo)入
gmDr:false,
arrList:[],

methods中

gmDrClick(){ // 獲取當(dāng)前時間,并賦值給入庫日期
    this.gmDr=true
    this.gmDrform.storageTime=this.nowTime()
  },

  gmDrTimeChange(val){//入庫日期發(fā)生變化,保存到gmDrform.storageTime中
    this.gmDrform.storageTime=val
  },

  gmDrClose(){//關(guān)閉模態(tài)框,清除數(shù)據(jù)
      this.$refs.gmDrform.resetFields();
  },

importExcel() {
    this.dialogChangePwdVisible = true;
    this.$refs.uploadExcel.click();
        },
readExcel(e) {
    const files = e.target.files;
    if (files.length <= 0) {
        //如果沒有文件名
        return false;
    }
    const fileReader = new FileReader();
    fileReader.onload = ev => {
      try {
        const data = ev.target.result;
        const workbook = XLSX.read(data, {
          type: "binary"
            
        });
      const wsname = workbook.SheetNames[0]; //取第一張表
      const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]); //獲取到XLSX表格中的數(shù)據(jù),并生成json格式的數(shù)據(jù)類型
      // console.log(ws,666);
      let arr = [];
      ws.forEach((value, index, ws) => {
        arr.push({
            typeNo: ws[index]["光貓型號"] + "",
            boxNo: ws[index]["光貓箱碼"] + "",
            snNos: ws[index]["光貓SN碼"] + "",
            storageTime:this.gmDrform.storageTime+"",
            name:"光貓",
            category:"光貓",
            remarks:"",

        });
      })
      for(let i in arr){
          let item = arr[i]
          for(let key in item){
            // console.log(item[key]);
            if(item[key] == "undefined"){
              delete item[key] 
            }
          }   
          }       
          this.arrList=arr//給arrList賦值,確定導(dǎo)入時傳入
    } catch (e) {
        return false;
      }
    };
    fileReader.readAsBinaryString(files[0]);
},

  gmDrSure(){//確定導(dǎo)入
      let headers={//axios發(fā)送請求時,需要配置請求頭
            headers:{ "Accept": "application/json","Content-Type": "application/json" }  
            }
      this.startLoading();
      let url = this.config.httpHeadUrl + "/api/modem/admin/saveBatchModem";
      this.$axios.post(url, JSON.stringify(this.arrList),headers ).then(res => {
      this.$message.success("導(dǎo)入成功！");
      this.gmDr = false;
      this.handleCurrentChange(1);
      this.$refs.uploadExcel.value = "";//把之前導(dǎo)入的清空
      if(res.data.flag==0){
        this.$message("導(dǎo)入表頭不正確")
        this.gmDr =true
      }
    },(error) => {
        this.$refs.uploadExcel.value = "";//把之前導(dǎo)入的清空
    })
},

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/104631.html

相關(guān)文章

  • 使用 SpreadJS 實現(xiàn) JavaScript 中導(dǎo)入和導(dǎo)出Excel文件

    摘要：而作為一款深受用戶喜愛的電子表格工具，借助其直觀的界面出色的計算性能和圖表工具，已經(jīng)成為數(shù)據(jù)統(tǒng)計領(lǐng)域不可或缺的軟件之一。使用實現(xiàn)的導(dǎo)入和導(dǎo)出通過純，您完全可以實現(xiàn)導(dǎo)入和導(dǎo)出文件功能，并為最終用戶提供與這些文件進(jìn)行交互的界面。 JavaScript是一個涵蓋多種框架、直譯式、可以輕松自定義客戶端的腳本語言，在 Web 應(yīng)用程序中，更加易于編碼和維護(hù)。而Excel 作為一款深受用戶喜愛的電...

    Jioby 評論0 收藏0

  • vue.js中如何導(dǎo)出Excel表格

    摘要：有一個項目需求，要求在前端項目中導(dǎo)出表格，經(jīng)過查找代碼確實可以實現(xiàn)，具體實現(xiàn)步驟為安裝依賴導(dǎo)入兩個下載和，在目錄下新建文件夾，里面放入和兩個文件在引入這兩個文件在組件中使用導(dǎo)出的方法序號昵稱姓名上面設(shè)置的表格第一行的標(biāo)題上面的是里對 有一個項目需求，要求在前端項目中導(dǎo)出Excel表格，經(jīng)過查找代碼,Vue.js確實可以實現(xiàn)，具體實現(xiàn)步驟為： 1.安裝依賴 npm install -S ...

    lunaticf 評論0 收藏0

  • Vue.js應(yīng)用性能優(yōu)化：第一部分---介紹性能優(yōu)化和懶加載

    摘要：我的目標(biāo)是使本系列成為關(guān)于應(yīng)用程序性能的完整指南。代碼分割就是將應(yīng)用程序分割成這些延遲加載的塊。總結(jié)延遲加載是提高應(yīng)用程序性能并減少其大小的最佳方法之一。在本系列的下一部分中，我將向您展示如何使用和路由來分割應(yīng)用程序代碼。 當(dāng)移動優(yōu)先（mobile-first）的方式逐漸成為一種標(biāo)準(zhǔn)，而不確定的網(wǎng)絡(luò)環(huán)境因素應(yīng)該始終是我們考慮的一點，因此保持讓應(yīng)用程序快速加載變得越來越困難。在本系列文章...

    ZweiZhao 評論0 收藏0

  • VUE實例圖解

    摘要：案例品牌列表構(gòu)建基本結(jié)構(gòu)利用的樣式數(shù)據(jù)要雙向更新，所以要用到，同時在后面的中要進(jìn)行初始化為添加按鈕綁定事件的中，綁定值為關(guān)鍵字刪除標(biāo)簽綁定函數(shù)，傳入?yún)?shù)的時候，需要用括號事件修飾符，表示阻止默認(rèn)事件實例對象新建一個實例函數(shù)中初始化需要雙向 VUE案例 品牌列表 構(gòu)建基本結(jié)構(gòu) 利用bootstrap的樣式 showImg(https://segmentfault.com/img/bVbf...

    wqj97 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<