如何使用vue實現前端導入excel數據
前言
繼前邊的vue的導出功能後,自己又去在網上搜瞭vue導入excel一些文章,自己通過對代碼的整理和調整,實現瞭vue導入excel的功能。
一、主界面先引入導入組件
1.這段主要是中間的那段excel-import標簽的那部分代碼,loadList是後邊導入成功後,子組件要調用的方法,這個方法是導入成功後,刷新表格數據的
<a-space class="crud-buttons"> <a-button @click="handleEdit" type="primary"> <a-icon type="edit"></a-icon> 修改 </a-button> <excel-import @fatherMethod="loadList"></excel-import> <a-button @click="exportData" type="danger" :loading="btnLoading"> <a-icon type="upload" />導出</a-button> <a-button type="primary" @click="grantWelfare"> <a-icon type="plus"></a-icon> 發放 </a-button> </a-space>
路徑根據你們的要求自行修改
import excelImport from "../../components/excel-import"
二、封裝excel-import組件
1.首先是template代碼(這裡用的是ant vue desgin框架的組件)
<template> <div class="import"> <a-button @click="exportData" type="primary"><a-icon type="import" />導入</a-button> <a-modal v-model="visible" title="導入數據" @ok="handleOk" @cancel="handleCancel" width="400px"> <a-upload-dragger :file-list="fileList" :multiple="false" :before-upload="beforeUpload" :remove="removeFile"> <p class="ant-upload-drag-icon"> <a-icon type="inbox"/> </p> <p class="ant-upload-hint"> 僅允許導入xls、xlsx格式文件 </p> </a-upload-dragger> </a-modal> </div> </template>
2.引入接口
import WelfareApi from '@/api/master/welfare'
3.js代碼methods
exportData(){ this.visible=true }, async handleOk(){ if (this.data.length === 0) { this.$message.error("請選擇要上傳的文件") } else { const data=await WelfareApi.importExcelData(this.data) this.$message.success(data.message) this.visible=false; this.fileList=[] this.$emit('fatherMethod'); } }, handleCancel(){ this.fileList=[] this.visible=false }, // 文件上傳前的鉤子 beforeUpload(file) { const isXslx = file.type === "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" || file.type === "application/vnd.ms-excel"; const isLt2M = file.size / 1024 / 1024 < 2; if (!isXslx) { this.$message.error("附件格式錯誤,請刪除後重新上傳!"); } if (isXslx) { if (this.fileList.length == 0) { this.fileList = [...this.fileList, file] this.importfxx(this.fileList); } else { this.$message.error("僅能選擇一個文件進行上傳!") } } if (!isLt2M) { this.$message.error("上傳文件大小不能超過 2MB!"); } return false }, removeFile(file) { const index = this.fileList.indexOf(file); const newFileList = this.fileList.slice(); newFileList.splice(index, 1); this.fileList = newFileList; }, importfxx(obj) { let _this = this; let inputDOM = this.$refs.inputer; // 通過DOM取文件數據 this.file = event.currentTarget.files[0]; let rABS = false; //是否將文件讀取為二進制字符串 let f = this.file; let reader = new FileReader(); FileReader.prototype.readAsBinaryString = function (f) { let binary = ""; let rABS = false; //是否將文件讀取為二進制字符串 let pt = this; let wb; //讀取完成的數據 let outdata; let reader = new FileReader(); reader.onload = function (e) { let bytes = new Uint8Array(reader.result); let length = bytes.byteLength; for (let i = 0; i < length; i++) { binary += String.fromCharCode(bytes[i]); } //此處引入,用於解析excel let XLSX = require("xlsx"); if (rABS) { wb = XLSX.read(btoa(fixdata(binary)), { //手動轉化 type: "base64" }); } else { wb = XLSX.read(binary, { type: "binary" }) } outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]); //outdata就是讀取的數據(不包含標題行即表頭,表頭會作為對象的下標) //此處可對數據進行處理 let arr = []; outdata.map(v => { let obj = {} obj.id = v['序號'] obj.dpStage = v['DP班號'] obj.traineeName = v['學員姓名'] obj.name = v['收貨人姓名'] obj.mobile = v['收貨人電話'] obj.province = v['省'] obj.city = v['市'] obj.district = v['區'] obj.detailAddr = v['詳細地址'] obj.expressName = v['快遞名稱'] obj.expressNumber = v['快遞編號'] obj.expressTime = v['發貨時間'] obj.statusName = v['狀態'] arr.push(obj) }); _this.data=arr; _this.dalen=arr.length; return arr; }; reader.readAsArrayBuffer(f); }; if (rABS) { reader.readAsArrayBuffer(f); } else { reader.readAsBinaryString(f); } }
這裡有幾點註意的地方
在對outdata處理的時候,例如obj.id=v['序號']
這裡的id就是傳給後端的對象集合中對象的屬性名,後端也要用對應的model接收
這裡的序號就是excel表格的表頭列名,一定要文字對應,不然會導入失敗
三.附加提示(後端也要寫的小夥伴可以參考下邊建議哈)
我們傳給後端的數據,應該是一個集合形式,在後端一般需要對數據進行處理,因為我們要把數據insert到我們的數據庫中去,當然可能會有重復的數據(比如說導入的是用戶信息,數據庫裡存在這個人的,你要導入的excel也存在)如果要求是修改的話,這時候就要根據的唯一標識(id,或者是電話、身份證號等等)來分情況做處理到底是新增還是修改。最後我還建議可以設置兩個變量,一個來記錄成功導入數據庫的記錄數量,一個記錄覆蓋(修改)記錄的數量,然後返回給前端。
四.總結
以上就是今天要講的內容,本文介紹瞭vue導入excel的使用,主要就是在前端把要導入的excel進行處理,最後把整理好的數據傳給後端,添加進數據庫中。
到此這篇關於如何使用vue實現前端導入excel數據的文章就介紹到這瞭,更多相關vue前端導入excel數據內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- 詳解如何實現在Vue中導入Excel文件
- vue導入excel文件,vue導入多個sheets的方式
- vue+elementUl導入文件方式(判斷文件格式)
- 詳解Vue ElementUI手動上傳excel文件到服務器
- Vue項目導入導出文件功能以及導出文件後亂碼問題及解決