關於Vue+iview的前端簡單的導入數據（excel）

前一段時間項目經歷了純前端處理導入excel文件並處理等問題，數據量大的時候時間上長的一比，三千條數據須要三四秒甚至更長，無論產品咋想的，具體作法爲：

首先下載一個這玩意：

 

進行簡單封裝一下：

<template>
  <span>
    <input v-if="isShow" class="input-file" type="file" @change="exportData"
           accept=".xlsx, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"/>
    <Button type="primary" @click="btnClick">導入數據</Button>
  </span>
</template>

<script>
    import XLSX from 'xlsx'

    export default {
        name: "inputExcel",
        props: {
            type: String,
            default: "選擇excel文件"
        },
        data() {
            return {
                isShow: true
            }
        },
        methods: {
            btnClick() {

                if (this.isShow === false) {
                    this.isShow = true
                    setTimeout(this.querry, 150)
                } else {
                    this.querry()
                }

            },

            querry() {

                document.querySelector(".input-file").click();
            },
            exportData(event) {

                if (!event.currentTarget.files.length) {
                    return;
                }
                const that = this;
                // 拿取文件對象
                var f = event.currentTarget.files[0];
                // 用FileReader來讀取
                var reader = new FileReader();
                // 重寫FileReader上的readAsBinaryString方法
                FileReader.prototype.readAsBinaryString = function (f) {
                    var binary = "";
                    var wb; // 讀取完成的數據
                    var outdata; // 你須要的數據
                    var reader = new FileReader();
                    reader.onload = function (e) {
                        // 讀取成Uint8Array，再轉換爲Unicode編碼（Unicode佔兩個字節）
                        var bytes = new Uint8Array(reader.result);
                        var length = bytes.byteLength;
                        for (var i = 0; i < length; i++) {
                            binary += String.fromCharCode(bytes[i]);
                        }
                        // 接下來就是xlsx了，具體可看api
                        wb = XLSX.read(binary, {
                            type: "binary"
                        });
                        outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
                        // 自定義方法向父組件傳遞數據
                        that.$emit("getResult", outdata);
                    };
                    reader.readAsArrayBuffer(f);
                };
                reader.readAsBinaryString(f);
                this.isShow = false
            }
        }
    }
</script>

<style scoped>
    .input-file {
        display: none;
    }
</style>

並在須要的地方引用：

 

數據處理：

 getMyExcelData(data) {
      //處理你的數據
      console.log('getMyExcelData', data);
      let current = this;
      util.showMsg(this, {succ: '導入數據成功'});
      data.map(function (value, index) {
         let bool = false;
         current.test_content.map(function (value1, i) {
             if (value1.modDataCode === value.modDataCode) {
                 bool = true;
             }
         })
         if (!bool) {
           current.test_content.push(value);
         }
       });
       this.test_content_clone = this.clone(this.test_content)
  },

 

時間有點長了，應該就這些。

 

< template >

< span >

< input v-if=" isShow" class= "input-file" type= "file" @ change=" exportData"

accept= ".xlsx, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" />

< Button type= "primary" @ click=" btnClick" >導入數據 </ Button >

</ span >

</ template >

< script >

import XLSX from 'xlsx'

export default {

name: "inputExcel",

props: {

type: String,

default: "選擇excel文件"

},

data() {

return {

isShow: true

}

},

methods: {

btnClick() {

if ( this. isShow === false) {

this. isShow = true

setTimeout( this. querry, 150)

} else {

this. querry()

}

},

querry() {

document. querySelector( ".input-file"). click();

},

exportData( event) {

if (! event. currentTarget. files. length) {

return;

}

const that = this;

// 拿取文件對象

var f = event. currentTarget. files[ 0];

// 用FileReader來讀取

var reader = new FileReader();

// 重寫FileReader上的readAsBinaryString方法

FileReader. prototype. readAsBinaryString = function ( f) {

var binary = "";

var wb; // 讀取完成的數據

var outdata; // 你須要的數據

var reader = new FileReader();

reader. onload = function ( e) {

// 讀取成Uint8Array，再轉換爲Unicode編碼（Unicode佔兩個字節）

var bytes = new Uint8Array( reader. result);

var length = bytes. byteLength;

for ( var i = 0; i < length; i++) {

binary += String. fromCharCode( bytes[ i]);

}

// 接下來就是xlsx了，具體可看api

wb = XLSX. read( binary, {

type: "binary"

});

outdata = XLSX. utils. sheet_to_json( wb. Sheets[ wb. SheetNames[ 0]]);

// 自定義方法向父組件傳遞數據

that. $emit( "getResult", outdata);

};

reader. readAsArrayBuffer( f);

};

reader. readAsBinaryString( f);

this. isShow = false

}

}

}

</ script >

< style scoped >

.input-file {

display: none;

}

</ style >