vue+xlsxフロントエンドexcelファイル内容の読み取りを実現

フロントエンドはjsがExcelドキュメントのデータ内容を読み取ることを実現する
htmlコードは以下の通りです.

 

            
         （   xls/xlsx  ）
            
                  
              
            
            

              {{file_name}}（{{file_size}}kb）
              
            

   

jsコード
ここではxlsxプラグインを使用する必要があります

import XLSX from 'xlsx'
  export default{
		methods:{
			//     
		      change_file(e){
		        if(this.$refs.file && !this.$refs.file.files[0]) return false;
		        const selected_file = this.$refs.file.files[0];
		        this.fileExcel.oldFile = selected_file;
		        this.file_name = selected_file.name;
		        this.file_size = selected_file.size ? (selected_file.size / 1024).toFixed(2) : 0;
		        this.readFule(selected_file)
		      },
		      readFule(file){
		        var name = file.name;
		        var reader= new FileReader();
		        let that = this;
		        reader.onload = function (e) {
		            that.fileExcel.oldFile = e.target.result;
		            var wb = XLSX.read(that.fileExcel.oldFile, { type: "binary" });
		            // console.log(wb);
		            var wb_sheetname=wb.SheetNames[0];
		            const wb_sheet = wb.Sheets[wb_sheetname]
		            // console.log(wb_sheet);
		            let fromTo = "";
		            fromTo = wb_sheet['!ref'];
		            // console.log(fromTo + "fromTo")
		            that.selectFileData = XLSX.utils.sheet_to_json(wb_sheet);
		            console.log(that.selectFileData);
		            if(!that.selectFileData.length){
		              tipsMsg(that,'error',`         ！`);
		              return false
		            }
		            that.get_result();
		        };
		        reader.readAsBinaryString(file);
		      },
		}
  }