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

需求

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

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

反手各种资料开始查阅，终于找到了可以完美实现该需求的方法，来记载下我的实现方案。希望对有需要的小伙伴有资助。
注意以下为正文（紧张内容），好好阅读，不要遗漏紧张知识点奥~ 

---

涉及到的紧张知识点

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

睁开说说：
1、插件xlsx

1. // 在项目根路径 安装xlsx
2. npm install -S xlsx
4. // 在需要使用的页面引入xlsx
5. import * as xlsx from 'xlsx'

复制代码

2、upload上传组件
上传组件的主动上传方法，传参方法，详细可翻阅elementUI plus官网
3、动态设置ref
涉及到动态设置ref的原因：
一是由于upload组件在设置了 :limit="1"，在上传第一个文件之后，欣赏器会生存着我们已经上传的文件，导致我们继续上传文件的时间，页面没有反应；解决该问题需要在on-success钩子函数中通过ref来清除已经上传的文件。

1. <template>
2.     <div>
3.         <el-upload
4.           ref="importExcelRef"
5.           :action="VITE_APP_API_URL"
6.           :limit="1"
7.           :show-file-list="false"
8.           class="uploadExcelContent"
9.           :on-success="importSuccess"   
10.         >
11.           <div title="导入excel">
12.             <div class="importExcel"></div>
13.           </div>
14.         </el-upload>
15.     </div>
16. </template>
17. <script setup>
18.     import { ref } from 'vue'
19.     const importExcelRef = ref(null)
20.     const importSuccess = ()=>{
21.        importExcelRef.value.clearFiles();
22.     }
23. </script>

复制代码

二是因为表单中存在多个表格需要导入excel作为底子数据进行编辑，且表格数目不固定，是根据后端数据渲染的，以是在清空上传文件的时间，需要处理未知的多个，以是需要动态设置ref。

1. <template>
2.     <div>
3.         <el-upload :ref="(el) => handleSetUploadRefMap(el, rowIndex,compIndex)">
4.           <div title="导入excel"  >
5.             <div class="importExcel"></div>
6.           </div>
7.         </el-upload>
8.     </div>
9. </template>
10. <script>
11. import { ref } from 'vue'
12. const uploadRefMap = ref({});
13. // 动态设置upload Ref
14. const handleSetUploadRefMap = (el,rowIndex,compIndex) => {
15.   if (el) {
16.     uploadRefMap.value[`Upload_Ref_${rowIndex}_${compIndex}`] = el
17.   }
18. }
19. </script>

复制代码

需求实当代码

1. <template>
2.     <div>
3.       <!-- 上传excel -->
4.       <el-upload
5.         :ref="(el) => handleSetUploadRefMap(el)"
6.         action=""
7.         :http-request="httpExcelRequest"
8.         :limit="1"
9.         :show-file-list="false"
10.         class="uploadExcelContent"
11.         :data={}
12.       >
13.         <div title="导入excel" style="cursor: pointer;" >
14.           <div>导入excel</div>
15.         </div>
16.       </el-upload>
18.       <!-- 列表 -->
19.       <div class="excel-content"  v-for="(rowItem,rowIndex) in excelList" :key="rowIndex">
20.         <div class="comp" v-for="(comp,compIndex) in rowItem" :key="compIndex">{{comp}}</div>
21.       </div>
22.     </div>
23. </template>
25. <script setup name="mainContent">
26. import * as xlsx from 'xlsx'
27. import {ElMessage} from 'element-plus'
28. import { ref } from 'vue'
29. const uploadRefMap = ref({});
30. const excelList = ref([])
32. // 动态设置upload Ref
33. const handleSetUploadRefMap = (el) => {
34.   if (el) {
35.     uploadRefMap.value[`Upload_Ref`] = el
36.   }
37. }
39. // 文件上传自定义
40. const  httpExcelRequest = async (op) => {
41.   // 获取除文件之外的参数，具体根据实际业务需求来
42.   console.log(op.data)
43.   // 获取上传的excel  并解析数据
44.   let file = op.file
45.   let dataBinary = await readFile(file);
46.   let workBook = xlsx.read(dataBinary, { type: "binary", cellDates: true })
47.   let workSheet = workBook.Sheets[workBook.SheetNames[0]]
48.   const excelData = xlsx.utils.sheet_to_json(workSheet,{ header: 1 })
49.   excelList.value = excelData
50.   console.log(excelData)
51.   if(uploadRefMap.value[`Upload_Ref`]){
52.     uploadRefMap.value[`Upload_Ref`].clearFiles();
53.   }
54. }
56. const readFile = (file) => {
57. return new Promise((resolve) => {
58.   let reader = new FileReader()
59.   reader.readAsBinaryString(file)
60.   reader.onload = (ev) => {
61.     resolve(ev.target?.result)
62.   }
63. })
64. }
66. </script>
68. <style lang="scss" scoped>
69. .uploadExcelContent{
70.   display: flex;
71.   flex-direction: row;
72. }
73. .excel-content{
74.   display: flex;
75.   flex-direction: row;
76.   align-items: center;
77.   .comp{
78.     width: 200px;
79.     font-size: 12px;
80.   }
81. }
82. </style>

复制代码

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

今天就到这里了，会继续加油的，是亮晶晶的芋头哟~

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。