vue3導入excel并解析excel數(shù)據(jù)渲染到表格中(純前端實現(xiàn))

更新時間：2024年04月24日 11:27:30 作者：亮晶晶的芋頭

在Vue中實現(xiàn)導出Excel有多種方式,可以通過前端實現(xiàn),也可以通過前后端配合實現(xiàn),下面這篇文章主要給大家介紹了關于vue3導入excel并解析excel數(shù)據(jù)渲染到表格中的相關資料,文中介紹的方法是純前端實現(xiàn),需要的朋友可以參考下

需求

用戶將已有的excel上傳到系統(tǒng)，并將excel數(shù)據(jù)同步到頁面的表格中進行二次編輯，由于excel數(shù)據(jù)不是最終數(shù)據(jù)，只是批量的一個初始模板，后端不需要存儲，所以該功能由前端獨立完成。

吐槽

系統(tǒng)中文件上傳下載預覽三部曲走了一遍，萬萬沒想到還要自己實現(xiàn)同步數(shù)據(jù)。

實際

反手各種資料開始查閱，終于找到了可以完美實現(xiàn)該需求的方法，來記錄下我的實現(xiàn)方案。希望對有需要的小伙伴有幫助。

注意以下為正文（重要內容），好好閱讀，不要漏掉重要知識點奧~

涉及到的主要知識點

插件xlsx
elementUI plus中的Upload 上傳組件
動態(tài)設置 ref

展開說說：

1、插件xlsx

// 在項目根路徑 安裝xlsx
npm install -S xlsx

// 在需要使用的頁面引入xlsx
import * as xlsx from 'xlsx'

2、upload上傳組件

上傳組件的自動上傳方法，傳參方法，詳細可翻閱elementUI plus官網

3、動態(tài)設置ref

涉及到動態(tài)設置ref的原因：

一是由于upload組件在設置了 :limit="1"，在上傳第一個文件之后，瀏覽器會保存著我們已經上傳的文件，導致我們繼續(xù)上傳文件的時候，頁面沒有反應；解決該問題需要在on-success鉤子函數(shù)中通過ref來清除已經上傳的文件。

<template>
    <div>
        <el-upload
          ref="importExcelRef"
          :action="VITE_APP_API_URL"
          :limit="1"
          :show-file-list="false"
          class="uploadExcelContent"
          :on-success="importSuccess"    
        >
          <div title="導入excel">
            <div class="importExcel"></div>
          </div>
        </el-upload>
    </div>
</template>
<script setup>
    import { ref } from 'vue'
    const importExcelRef = ref(null)
    const importSuccess = ()=>{
       importExcelRef.value.clearFiles();
    }
</script>

二是因為表單中存在多個表格需要導入excel作為基礎數(shù)據(jù)進行編輯，且表格數(shù)量不固定，是根據(jù)后端數(shù)據(jù)渲染的，所以在清空上傳文件的時候，需要處理未知的多個，所以需要動態(tài)設置ref。

<template>
    <div>
        <el-upload :ref="(el) => handleSetUploadRefMap(el, rowIndex,compIndex)">
          <div title="導入excel"  >
            <div class="importExcel"></div>
          </div>
        </el-upload>
    </div>
</template>
<script>
import { ref } from 'vue'
const uploadRefMap = ref({});
// 動態(tài)設置upload Ref
const handleSetUploadRefMap = (el,rowIndex,compIndex) => {
  if (el) {
    uploadRefMap.value[`Upload_Ref_${rowIndex}_${compIndex}`] = el
  }
}
</script>

需求實現(xiàn)代碼

<template>
    <div>
      <!-- 上傳excel -->
      <el-upload
        :ref="(el) => handleSetUploadRefMap(el)"
        action=""
        :http-request="httpExcelRequest"
        :limit="1"
        :show-file-list="false"
        class="uploadExcelContent"
        :data={}
      >
        <div title="導入excel" style="cursor: pointer;" >
          <div>導入excel</div>
        </div>
      </el-upload>

      <!-- 列表 -->
      <div class="excel-content"  v-for="(rowItem,rowIndex) in excelList" :key="rowIndex">
        <div class="comp" v-for="(comp,compIndex) in rowItem" :key="compIndex">{{comp}}</div>
      </div>
    </div>
</template>

<script setup name="mainContent">
import * as xlsx from 'xlsx' 
import {ElMessage} from 'element-plus'
import { ref } from 'vue'
const uploadRefMap = ref({});
const excelList = ref([])

// 動態(tài)設置upload Ref
const handleSetUploadRefMap = (el) => {
  if (el) {
    uploadRefMap.value[`Upload_Ref`] = el
  }
}

// 文件上傳自定義
const  httpExcelRequest = async (op) => {
  // 獲取除文件之外的參數(shù)，具體根據(jù)實際業(yè)務需求來
  console.log(op.data)
  // 獲取上傳的excel  并解析數(shù)據(jù)
  let file = op.file
  let dataBinary = await readFile(file);
  let workBook = xlsx.read(dataBinary, { type: "binary", cellDates: true })
  let workSheet = workBook.Sheets[workBook.SheetNames[0]]
  const excelData = xlsx.utils.sheet_to_json(workSheet,{ header: 1 })
  excelList.value = excelData
  console.log(excelData)
  if(uploadRefMap.value[`Upload_Ref`]){
    uploadRefMap.value[`Upload_Ref`].clearFiles();
  }
}

const readFile = (file) => {
return new Promise((resolve) => {
  let reader = new FileReader()
  reader.readAsBinaryString(file)
  reader.onload = (ev) => {
    resolve(ev.target?.result)
  }
})
}

</script>

<style lang="scss" scoped>
.uploadExcelContent{
  display: flex;
  flex-direction: row;
}
.excel-content{
  display: flex;
  flex-direction: row;
  align-items: center;
  .comp{
    width: 200px;
    font-size: 12px;
  }
}
</style>

由于業(yè)務需求不同，對表格數(shù)據(jù)的詳細處理邏輯，就不在這里顯示了，可根據(jù)自己的數(shù)據(jù)結構進行賦值操作，運行demo后可以直接在控制臺查看拿到的excel數(shù)據(jù)。