亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

vue中如何使用xlsx讀取excel文件實例代碼

 更新時間：2023年12月12日 16:00:54   作者：捂耳聽楓  
在Vue中使用xlsx庫可以幫助我們讀取和寫入Excel文件,下面這篇文章主要給大家介紹了關于vue中如何使用xlsx讀取excel文件的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下

下載安裝插件

npm install xlsx
or
yarn add xlsx

在項目的node_modules文件夾和package.json文件中可以找到xlsx依賴

導入項目

import * as XLSX from "../../node_modules/xlsx"

獲取文件對象

這里使用的h5原生文件上傳項

        <input type="file" id="uploadExcel" multiple @change="Change" />

其中multiple屬性允許上傳多個文件

在選擇文件的過程中，觸發(fā)事件的流程是下面這樣的：

首先觸發(fā)的是鼠標按下事件mousedown，然后就是焦點到了input上面，然后鼠標抬起事件mouseup，觸發(fā)click事件，失去焦點onblur以后彈出文件選擇框，選中文件以后觸發(fā)焦點focus，最后觸發(fā)change事件。

其中，可以發(fā)現(xiàn)fileList是一個類數組，由傳入的file對象組成。每個file對象包含一下屬性：

打印fileList信息

  let fileList = event.target.files;

屬性屬性值描述
lastModifiedNumber表示最近一次的修改時間的時間戳
lastModeifiedDateObject表示最后一次修改時間的Date對象，可以在其中調用Date對象的有關方法。
name文件上傳時的文件名
size文件的字節(jié)大小
typeString文件的MIME類型
weblitRelativePath當在input上添加webkitdirectory屬性時，可選文件夾，此時weblitRelativePath表示文件夾中文件的相對路徑。未加時為空

創(chuàng)建一個FileReader實例：

let reader = new FileReader();

FileReader提供了如下方法：

方法定義方法定義
readAsArrayBuffer(file)按字節(jié)讀取文件內容，結果用ArrayBuffer對象表示
readAsBinaryString(file)按字節(jié)讀取文件內容，結果為文件的二進制串
readAsDataURL(file)將文件讀取為DataURL，因此可以讀取圖片。
readAsText(file, encoding)將文件讀取為文本，第二個參數是文本的編碼方式，默認為utf-8
abort()終止文件讀取操作

FileReader提供了如下 事件:

事件描述
onabort當讀取操作被終止時調用
onerror當讀取操作發(fā)生錯誤時調用
onload當讀取操作成功完成時調用
onloaded當讀取操作完成時調用，無論成功或失敗
onloadstart當讀取操作開始時調用
onprogress在讀取數據過程中周期性調用

讀取excel主要是通過以下語句實現(xiàn)：

XLSX.read(data, { type: type });

返回的對象

FileReader方法對應的type取值如下：

base64以base64方法讀取
binaryBinatyString格式(byte n is data.charCodeAt (n))
stringUTF-8編碼的字符串
buffernodejs Buffer
arrayUint8Array，8位無符號數組
file文件的路徑(僅nodejs下支持)

vue中的v-for()展示數據

演示

代碼

<template>
  <div class="container">
    <div class="header">
      <div class="btn">
        <button @click="Add">添加</button>
        <button>保存</button>
        <button @click="AllAdd">全部刪除</button>
      </div>
      <div class="inp">
        <input type="file" id="uploadExcel" multiple @change="Change" />

      </div>
    </div>

    <table id="table">
      <thead>
        <tr>
          <th>學號</th>
          <th>姓名</th>
          <th>年齡</th>
          <th>班級</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody style="text-align: center">
        <tr v-for="item in dataList" :key="item.id">
          <td>{{ item.__EMPTY }}</td>
          <td>{{ item.__EMPTY_1 }}</td>
          <td>{{ item.__EMPTY_2 }}</td>
          <td>{{ item.__EMPTY_3 }}</td>
          <td>
            <button @click="del(item.__EMPTY)">刪除</button>
            <button @click="Add()">修改</button>
          </td>
        </tr>
      </tbody>
    </table>

    <div id="shade" class="c1 hide"></div>
    <div id="modal" class="c2 hide">
      <h2>學生信息</h2>
      <p>學號<input type="text" /></p>
      <p>姓名<input type="text" /></p>
      <p>年齡<input type="text" /></p>
      <p>班級<input type="text" /></p>
      <p>

        <button type="button">添加</button>
        <button type="button" @click="Hide();">取消</button>
      </p>
    </div>
  </div>
</template>
<script>
import * as XLSX from "../../node_modules/xlsx"
export default {
  data() {
    return {
      dataList: []
    };
  },

  methods: {
    Change(event) {
      // 獲取到文件夾
      let fileList = event.target.files;
      // 如果數據不為空
      if (fileList) {
        // 前言：FileReader是一種異步文件讀取機制，結合input:file可以很方便的讀取本地文件。
        let reader = new FileReader();
        let file = fileList[0]; //拿到第一條數據
        reader.readAsBinaryString(file)// 將文件以二進制形式讀入頁面
        console.log(this);  //這里的this指向 vue中的data
        let _this = this //把data里的數據賦值給新的變量
        // wb:wordbook 工作表  
        reader.addEventListener("load", function (e) {
          console.log(this);  //FileReader實例對象
          var data = e.target.result; //讀取成功后result中的數據
          var wb = XLSX.read(data, { type: 'binary' });  //以base64方法讀取 結果

          let sheetName = wb.SheetNames[0] //是獲取Sheets中第一個Sheet的名字
          let sheets = wb.Sheets[sheetName] //wb.Sheets[Sheet名]獲取第一個Sheet的數據
          //將數據解析為json字符串
          let dataList2 = JSON.stringify(XLSX.utils.sheet_to_json(sheets))
          let dataList3 = (JSON.parse(dataList2)) //講json轉為 數組的格式 看格式所需
          _this.dataList = dataList3//賦值
     
        })
      }
    },
    Add() {
      document.getElementById('shade').classList.remove('hide');
      document.getElementById('modal').classList.remove('hide');
    },
    Hide() {
      document.getElementById('shade').classList.add('hide');
      document.getElementById('modal').classList.add('hide');
    },
    AllAdd() {

    },
    del(id) {
      console.log(id);
      let index = null
      index = this.dataList.findIndex(item => {
        if (item.id === id) return true
      })
      this.dataList.splice(index, 1)
    },

  },
};
</script>

<style scoped>
.container {
  width: 800px;
  margin: 0 auto;
}

.header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid;
}

tr,
th,
td {
  border: 1px solid #000;
  padding: 5px;
}

button {
  border: none;
  padding: 5px;
  background-color: #00a297;
  color: #fff;
  border-radius: 5px;
  cursor: pointer;
  margin: 0 5px;
}

tr:nth-child(2n) {
  background-color: #dcdcdc;
}

.hide {
  display: none;
}

.c1 {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, .5);
  z-index: 2;
}

.c2 {
  background-color: white;
  position: fixed;
  width: 400px;
  height: 300px;
  top: 50%;
  left: 50%;
  z-index: 3;
  margin-top: -150px;
  margin-left: -200px;
}
</style>

總結 

到此這篇關于vue中如何使用xlsx讀取excel文件的文章就介紹到這了,更多相關vue xlsx讀取excel文件內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

相關文章

最新評論