vue+element實現excel中的信息批量導入和導入模板的下載

在頁面中，凡有表格的信息，那必定會涉及到表格的批量導入。把一個excel表中的信息導入到頁面中，下面有兩種方法實現這個功能。

• 第一種是須要後臺提供的接口，把參數傳給後臺，後臺返給表中的數據。
• 第二種是純前端實現表格的批量導入。

感受有用就點個贊吧,給我一波小動力~~~

經過後臺的接口實現批量導入

---

一、element實現一個數據導入的按鈕

<el-form-item style="float:right;">
        <el-button  size="small" icon="el-icon-download" @click="downLoadExlce">模板下載</el-button>
      <el-upload
                ref="upload"
                :action="uploadUrl"     //上傳的地址
                :limit="1"  //最大容許上傳個數
                :before-upload="beforeUpload"  //上傳文件以前的鉤子，參數爲上傳的文件
                :headers="token"    //設置上傳的請求頭
                :data = "importData"   //上傳時附帶的額外參數
                accept=".xls"    //接受上傳的文件類型
                class="up-class"
                :on-success="uploadSuccess"   //文件上傳成功時的鉤子
                :show-file-list="false"  //是否顯示已上傳文件列表
                :auto-upload="true" //是否在選取文件後當即進行上傳
                >
          <el-button slot="trigger" size="small" type="primary" class="el-icon-plus el-icon-upload" >導入數據</el-button>
        </el-upload>
</el-form-item>
複製代碼

beforeUpload(file) {
      let extension =file.name.substring(file.name.lastIndexOf('.')+1);
      if(extension  !== 'xls') {
        this.$message({
          message: '上傳文件只能是 xls格式!',
          type: 'warning'
        });
        return false;
      }
    },
    uploadSuccess (res ,file,fileList) {
      if (res.code == 200)
      {
        this.$message({
          message: '導入成功!',
          type: 'info'
        });
      }else
      {
        this.$alert(res.message, '導入失敗', {
          confirmButtonText: '肯定',
        });
      }
      this.$refs.upload.clearFiles();
    },
複製代碼

二、 設置上傳的參數、地址和請求頭

data(){
     importData: {         //參數
        type : '接口的參數'
      },
     uploadUrl:'',   //地址
     token :{     //請求頭
        Authorization:null,
      },
}

mounted(){
    this.uploadUrl ='路徑';
    this.token.Authorization = Cookies.get('token');   //從cookie裏獲取token
}
複製代碼

純前端實現批量導入

---

一、安裝XLSX及引用

npm i XLSX -S

import XLSX from 'xlsx'

二、添加表格

<el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>
    
    data () {
		return {
			tableData: []
		}
	},
複製代碼

三、添加按鈕

<el-upload
	       class="upload"
	       action="" //上傳路徑
	       :multiple="false"    //是否支持多選文件
	       :show-file-list="false"  //是否顯示已上傳文件列表
	       accept=".xls"    //接受上傳的文件類型
	       :http-request="httpRequest" //覆蓋默認的上傳行爲，能夠自定義上傳的實現
	       >
	       <el-button size="small" type="primary">批量導入</el-button>
	     </el-upload>
複製代碼

四、寫方法

methods: {
   httpRequest (e) {
	let file = e.file // 文件信息

        if (!file) {   // 沒有文件
          return false
        } else if (!/\.(xls|xlsx)$/.test(file.name.toLowerCase())) {
          // 格式根據本身需求定義
          this.$message.error('上傳格式不正確，請上傳xls或者xlsx格式')
          return false
        }

        const fileReader = new FileReader()
        fileReader.onload = (ev) => {
          try {
            const data = ev.target.result
            const workbook = XLSX.read(data, {
              type: 'binary'  // 以字符編碼的方式解析
            })
            const exlname = workbook.SheetNames[0]   // 取第一張表
            const exl = XLSX.utils.sheet_to_json(workbook.Sheets[exlname]) //生成json表格內容
            // 將 JSON 數據掛到 data 裏
            this.tableData = exl
            // document.getElementsByName('file')[0].value = '' 
            // 根據本身需求，可重置上傳value爲空，容許重複上傳同一文件
          } catch (e) {
            console.log('出錯了：：')
            return false
          }
	    }
      fileReader.readAsBinaryString(file)
	}
}
</script>
複製代碼

導入模板的下載

---

downLoadExlce () {
            let hrefStr = encodeURI('下載路徑');
            window.location.href = hrefStr;
        },
複製代碼

純前端實現批量導入參考連接