????前兩天遇到一個需求，就是前端做一個識別xls文件數(shù)據(jù)并將其轉換成json格式,然后渲染成表格秽浇，并使其不符合規(guī)則的產(chǎn)生高亮
下載所需要的依賴包? ? ? npm?install?xlsx
導入包
import XLSX from "xlsx";
1.添加監(jiān)聽事件
2.負責讀取Excel文件
mounted() {
? ? this.$refs.upload.addEventListener("change", e => {
? ? ? this.readExcel(e);
? ? });
? },
readExcel(e) {
? ? ? //表格導入
? ? ? var that = this;
? ? ? const files = e.target.files;
? ? ? console.log(files);
? ? ? if (!that.verifyExcelFileOnUpload(files)) {//此處方法在下方2.1處
? ? ? ? //驗證文件格式
? ? ? ? return false;
? ? ? }
? ? ? const fileReader = new FileReader();
? ? ? ?//當文件加載成功后執(zhí)行
? ? ? fileReader.onload = ev => {
? ? ? ? try {
? ? ? ? ? that.dsActors = [];
? ? ? ? ? const data = ev.target.result;
? ? ? ? ? const workbook = XLSX.read(data, {
? ? ? ? ? ? type: "binary"
? ? ? ? ? });
? ? ? ? ? var sheet_name_list = workbook.SheetNames;
? ? ? ? ? const ws = XLSX.utils.sheet_to_json(
? ? ? ? ? ? workbook.Sheets[sheet_name_list[0]],
? ? ? ? ? ? { header: 1 }
? ? ? ? ? );
? ? ? ? //注：變量ws? ?就是獲取到文件的數(shù)據(jù)
? ? ? ? ? if (that.verifyDataAfterUpload(ws)) {//此方法在下方2.2處(為業(yè)務代碼可忽略)
????????????var mode = {
? ? ? ? ? ? ? actorList: this.dsActors,
? ? ? ? ? ? ? LoginUserId:this.$store.state.currentUser.Id
? ? ? ? ? ? }; //此處為業(yè)務代碼數(shù)據(jù)模型，
? ? ? ? ? ? that.checkUploadData(mode);
? ? ? ? ? } else {
? ? ? ? ? ? this.$data.alertConfig.show(
? ? ? ? ? ? ? this.$t("導入的數(shù)據(jù)有誤甚负，請檢查高亮部分"),
? ? ? ? ? ? ? "danger",
? ? ? ? ? ? ? 300
? ? ? ? ? ? );
? ? ? ? ? }
? ? ? ? } catch (e) {
? ? ? ? ? return false;
? ? ? ? }
? ? ? };
? ? ? fileReader.readAsBinaryString(files[0]);
? ? }, //讀取Excel文件
2.1判斷文件格式是否正確
verifyExcelFileOnUploadverifyExcelFileOnUpload(files) {
? ? ? console.log(files[0].size);
? ? ? if (files[0].size > 2 * 1024 * 1024) {
? ? ? ? this.$data.alertConfig.show(
? ? ? ? ? this.$t("上傳文件太大柬焕，僅支持2MB以下的文件"),
? ? ? ? ? "danger",
? ? ? ? ? 3
? ? ? ? );
? ? ? ? return false;
? ? ? }
? ? ? if (files.length <= 0) {
? ? ? ? //如果沒有文件名
? ? ? ? return false;
? ? ? } else if (!/\.(xls|xlsx)$/.test(files[0].name.toLowerCase())) {
? ? ? ?//此處代碼塊內(nèi)容為我的代碼，做示范性作用梭域，執(zhí)行有可能報錯斑举，
? ? ????/*
????????$("#i-file").val(""); //清空文件加載路徑
? ? ? ? this.$data.alertConfig.show(
? ? ? ? ? this.$t("上傳文件格式錯誤，目前只支援xls或xlsx格式"),
? ? ? ? ? "danger",
? ? ? ? ? 3
? ? ? ? );
? ? ? ? */
? ? ? ? return false;
? ? ? }
? ? ? return true;
? ? }, //驗證Excel文件格式
2.2判斷加載的數(shù)據(jù)是否合格? （注這個是可以不用寫的病涨，只不過為了記住業(yè)務我寫上去的懂昂，與前面關聯(lián)不大，只用于做業(yè)務判斷）
verifyDataAfterUpload(ws) {
? ? ? var that = this;
? ? ? that.dsActors = []; //清空接收數(shù)據(jù)
? ? ? const actorTypes = [300010, 300020, 300030]; //參與者類型
? ? ? var localValidatePassed = true;
? ? ? var tempName = [];
? ? ? var j = 0; //行號? ID
? ? ? for (var i = 2; i < ws.length; i++) {
? ? ? ? var sheetData = {
? ? ? ? ? UserName: ws[i][0] != undefined ? ws[i][0] : "",
? ? ? ? ? Name: ws[i][1] != undefined ? ws[i][1] : "",
? ? ? ? ? TypeId: ws[i][2] != undefined ? ws[i][2] : "",
? ? ? ? ? ErrorCellsIndex: [],
? ? ? ? ? Id: i - 2
? ? ? ? };
? ? ? ? if (sheetData.Name == "") {
? ? ? ? ? sheetData.ErrorCellsIndex.push(1);
? ? ? ? ? localValidatePassed = false;
? ? ? ? }
? ? ? ? if (sheetData.UserName == "") {
? ? ? ? ? sheetData.ErrorCellsIndex.push(0);
? ? ? ? ? localValidatePassed = false;
? ? ? ? }
? ? ? ? if (actorTypes.indexOf(sheetData.TypeId) == -1) {
? ? ? ? ? sheetData.ErrorCellsIndex.push(2);
? ? ? ? ? localValidatePassed = false;
? ? ? ? }
? ? ? ? tempName.push(sheetData.UserName);
? ? ? ? that.dsActors.push(sheetData);
? ? ? }
? ? ? var duplicateDataValidate = that.validateDuplicateData(tempName);
? ? ? localValidatePassed = localValidatePassed && duplicateDataValidate;
? ? ? return localValidatePassed;
? ? }, //判斷加載數(shù)據(jù)是否合格
2.3判斷重復用戶名(業(yè)務代碼)
validateDuplicateData(arr) {
? ? ? var that = this;
? ? ? var list = [];
? ? ? for (var i = 0; i < arr.length; i++) {
? ? ? ? var hasRead = false;
? ? ? ? for (var k = 0; k < list.length; k++) {
? ? ? ? ? if (i == list[k]) {
? ? ? ? ? ? hasRead = true;
? ? ? ? ? }
? ? ? ? }
? ? ? ? if (hasRead) {
? ? ? ? ? break;
? ? ? ? }
? ? ? ? var _index = i,
? ? ? ? ? haveSame = true;
? ? ? ? for (var j = i + 1; j < arr.length; j++) {
? ? ? ? ? if (arr[i] == arr[j]) {
? ? ? ? ? ? list.push(j);
? ? ? ? ? ? if (that.dsActors[i].ErrorCellsIndex.indexOf(0) == -1) {
? ? ? ? ? ? ? that.dsActors[i].ErrorCellsIndex.push(0);
? ? ? ? ? ? }
? ? ? ? ? ? that.dsActors[j].ErrorCellsIndex.push(0);
? ? ? ? ? ? haveSame = false;
? ? ? ? ? }
? ? ? ? }
? ? ? }
? ? ? return haveSame;
? ? }, //驗證重複用戶名
