南宁网站制作-中国互联,asp.net 价格查询网站,暴雪国服回归,安装网站出现dir需求
用户将已有的excel上传到系统#xff0c;并将excel数据同步到页面的表格中进行二次编辑#xff0c;由于excel数据不是最终数据#xff0c;只是批量的一个初始模板#xff0c;后端不需要存储#xff0c;所以该功能由前端独立完成。
吐槽
系统中文件上传下载预览三部…需求
用户将已有的excel上传到系统并将excel数据同步到页面的表格中进行二次编辑由于excel数据不是最终数据只是批量的一个初始模板后端不需要存储所以该功能由前端独立完成。
吐槽
系统中文件上传下载预览三部曲走了一遍万万没想到还要自己实现同步数据。
实际
反手各种资料开始查阅终于找到了可以完美实现该需求的方法来记录下我的实现方案。希望对有需要的小伙伴有帮助。
注意以下为正文重要内容好好阅读不要漏掉重要知识点奥~ 涉及到的主要知识点
插件xlsxelementUI plus中的Upload 上传组件动态设置 ref
展开说说
1、插件xlsx
// 在项目根路径 安装xlsx
npm install -S xlsx// 在需要使用的页面引入xlsx
import * as xlsx from xlsx
2、upload上传组件
上传组件的自动上传方法传参方法详细可翻阅elementUI plus官网
3、动态设置ref
涉及到动态设置ref的原因
一是由于upload组件在设置了 :limit1在上传第一个文件之后浏览器会保存着我们已经上传的文件导致我们继续上传文件的时候页面没有反应解决该问题需要在on-success钩子函数中通过ref来清除已经上传的文件。
templatedivel-uploadrefimportExcelRef:actionVITE_APP_API_URL:limit1:show-file-listfalseclassuploadExcelContent:on-successimportSuccess div title导入exceldiv classimportExcel/div/div/el-upload/div
/template
script setupimport { ref } from vueconst importExcelRef ref(null)const importSuccess (){importExcelRef.value.clearFiles();}
/script
二是因为表单中存在多个表格需要导入excel作为基础数据进行编辑且表格数量不固定是根据后端数据渲染的所以在清空上传文件的时候需要处理未知的多个所以需要动态设置ref。
templatedivel-upload :ref(el) handleSetUploadRefMap(el, rowIndex,compIndex)div title导入excel div classimportExcel/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
需求实现代码
templatediv!-- 上传excel --el-upload:ref(el) handleSetUploadRefMap(el)action:http-requesthttpExcelRequest:limit1:show-file-listfalseclassuploadExcelContent:data{}div title导入excel stylecursor: pointer; div导入excel/div/div/el-upload!-- 列表 --div classexcel-content v-for(rowItem,rowIndex) in excelList :keyrowIndexdiv classcomp v-for(comp,compIndex) in rowItem :keycompIndex{{comp}}/div/div/div
/templatescript setup namemainContent
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.filelet 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 excelDataconsole.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)}
})
}/scriptstyle langscss 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数据。 今天就到这里了会继续加油的是亮晶晶的芋头哟~
