首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue3导入excel解析数据渲染

vue3导入excel并解析excel数据渲染到表格中(纯前端实现)

2024-04-24 11:25:44 作者：亮晶晶的芋头

在Vue中实现导出Excel有多种方式,可以通过前端实现,也可以通过前后端配合实现,下面这篇文章主要给大家介绍了关于vue3导入excel并解析excel数据渲染到表格中的相关资料,文中介绍的方法是纯前端实现,需要的朋友可以参考下

需求

用户将已有的excel上传到系统，并将excel数据同步到页面的表格中进行二次编辑，由于excel数据不是最终数据，只是批量的一个初始模板，后端不需要存储，所以该功能由前端独立完成。

吐槽

系统中文件上传下载预览三部曲走了一遍，万万没想到还要自己实现同步数据。

实际

反手各种资料开始查阅，终于找到了可以完美实现该需求的方法，来记录下我的实现方案。希望对有需要的小伙伴有帮助。

注意以下为正文（重要内容），好好阅读，不要漏掉重要知识点奥~

涉及到的主要知识点

插件xlsx
elementUI plus中的Upload 上传组件
动态设置 ref

展开说说：

1、插件xlsx

// 在项目根路径 安装xlsx
npm install -S xlsx

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

2、upload上传组件

上传组件的自动上传方法，传参方法，详细可翻阅elementUI plus官网

3、动态设置ref

涉及到动态设置ref的原因：

一是由于upload组件在设置了 :limit="1"，在上传第一个文件之后，浏览器会保存着我们已经上传的文件，导致我们继续上传文件的时候，页面没有反应；解决该问题需要在on-success钩子函数中通过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作为基础数据进行编辑，且表格数量不固定，是根据后端数据渲染的，所以在清空上传文件的时候，需要处理未知的多个，所以需要动态设置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({});
// 动态设置upload Ref
const handleSetUploadRefMap = (el,rowIndex,compIndex) => {
  if (el) {
    uploadRefMap.value[`Upload_Ref_${rowIndex}_${compIndex}`] = el
  }
}
</script>

需求实现代码

<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([])

// 动态设置upload Ref
const handleSetUploadRefMap = (el) => {
  if (el) {
    uploadRefMap.value[`Upload_Ref`] = el
  }
}

// 文件上传自定义
const  httpExcelRequest = async (op) => {
  // 获取除文件之外的参数，具体根据实际业务需求来
  console.log(op.data)
  // 获取上传的excel  并解析数据
  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>

由于业务需求不同，对表格数据的详细处理逻辑，就不在这里显示了，可根据自己的数据结构进行赋值操作，运行demo后可以直接在控制台查看拿到的excel数据。

总结

到此这篇关于vue3导入excel并解析excel数据渲染到表格中的文章就介绍到这了,更多相关vue3导入excel解析数据渲染内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！