v u e + ts excel表的导入解析转换加下载excel表格式（个人笔记）

html部分

我这里是用element，组件Dropdown 下拉菜单，做批量导入和下载excel模板的选项。上传是用的组件 Upload 上传。

            <el-dropdown trigger="click"><el-button type="primary">批量导入<i class="el-icon-arrow-down"></i></el-button><template #dropdown><el-dropdown-menu><el-dropdown-item><el-button type="text"><a style="color: #59a3ff" href="./接单目标模板.xlsx" target="_blank"> 下载模板 </a></el-button></el-dropdown-item><el-dropdown-item><el-upload :show-file-list="false" class="upload-demo" action="" :auto-upload="false" :on-change="uploadChange"><el-button type="text">导入文件 </el-button></el-upload></el-dropdown-item></el-dropdown-menu></template></el-dropdown>

效果图

导入事件部分

// 导入事件
const uploadChange = async (e: any) => {console.log(e);const files = e.raw;if (files.length <= 0) {return false;} else if (!/\.(xls|xlsx)$/.test(files.name.toLowerCase())) {console.log("上传格式不正确，请上传xls或者xlsx格式");return false;}// 读取表格const fileReader = new FileReader();fileReader.onload = (ev: any) => {const workbook = XLSX.read(ev.target.result, {type: "binary",});const wsname = workbook.SheetNames[0];const ws: any = XLSX.utils.sheet_to_json(workbook.Sheets[wsname]);console.log(ws); // 转换成json的数据const m: any = dealExcel(ws); // ...对数据进行自己需要的操作console.log(m);};fileReader.readAsBinaryString(files);state.UPdialogTableVisible = true;};// 定义数据const dealExcel = (ws: any) => {let keymap: any = {// 我们要转换的开头empName: "负责人",period: "年月",custName: "客户",partType: "产品类别",itemNo: "产品",areaName: "区域",brandName: "品牌",channelType: "渠道",objectiveAmt: "接单目标金额",};
//targetTypeData.value值是我项目需要用到的匹配字段 这个因为我的项目需要根据这里有的数据从而保留的字段 没有的要去除。 如果项目没有要求字段变化的话 这段匹配逻辑可以去掉不用
// 我项目里匹配值是 ['负责人','年月',"客户"] 返回的是这样的 所以要进行匹配一下const jsonArr: any = [];for (const key in keymap) {if (targetTypeData.value.indexOf(keymap[key]) < 0) { if (key != "objectiveAmt") delete keymap[key];}}let keyJson = { ...keymap }; //用于初始化ws.forEach((item: any) => {for (const k in keymap) {keymap[k] = item[keymap[k]];console.log(keymap[k], item[keymap[k]]);}console.log(keymap);jsonArr.push(keymap);keymap = { ...keyJson };});console.log(jsonArr);wxExcelData.value = jsonArr;console.log(wxExcelData.value);
// 不需要匹配的话只用这个就可以
// ws.forEach((sourceObj: any) => {
//        let arr = new Array()
//        Object.keys(sourceObj).map((keys) => {
//          if (keys.includes('步骤')) {
//            arr.push(sourceObj[keys])
//            delete sourceObj[keys]//         } else if (keymap[keys]) {
//            sourceObj[keymap[keys]] = sourceObj[keys]
//            delete sourceObj[keys]
//          }
//        })
//      })return ws};

选择导入的excel

导入展示效果，就可以根据我自己的项目需求而选择性的保留需要新增的数据再提交给后端接口了

我这里还做了一个弹窗tabel表格展示刚刚导入的表格数据信息有误的话可以直接修改和一些提示这个可以自由发挥，我就不过多解析了

至于下载导入模板excel 我用的是一种很简单的方法，我是直接把模板放到了pubic

然后再html部分添加a标签

 <a style="color: #59a3ff" href="./接单目标模板.xlsx" target="_blank"> 下载模板 </a>

v u e + ts excel表的导入解析转换加下载excel表格式（个人笔记）相关推荐

用ado把excel数据写入oracle,如何将excel表格数据导入到oracle数据库对应的表中？!oracle导出excel文件...
如何把excel里的表导入到oracle里使用第三方工具吧,toad之类的一个excel表格中有多个sheet,如何将其导入oracle数据库户和要用DBA 最简单得建用户: create us ...
oracle数据库表excel文件位置,“如何将excel表格数据导入到oracle数据库对应的表中？“数据库文件导入excel表格数据库中...
如何实现Excel表格自动导入到数据库库?是什么数据库?sql?access?mysql?我以sql2008为例子 1.打开SQL Server Management Studio-任务-数据 2. ...
oracle表中放入word,“如何将excel表格数据导入到oracle数据库对应的表中？“将excel表格导入word...
如何将excel表格数据导入到oracle数据库对应的表中? 敢问楼主,表A几列,表B存在几列,表C存在几列常规方法(表中列和excel中列) PLSQL 中 : select * from A u ...
《项目经验》--简单三层使用DataTable向数据库表批量导入数据---向SqlServer多张张表中导入数据
前面已经介绍过如何向数据库的一张表中批量导入数据,详情见博客<项目经验---简单三层使用DataTable向数据库表批量导入数据---向SqlServer一张表中导入数据>:本文主要介绍如 ...
新点软件怎么导入清单_excle表怎么导入新点,怎样把EXCEL表格导入project 中?
excel怎么将表格导入另一个表格直接复制-粘贴其实更加. 导入有格式等的要求,软件版本也是有的. 如果你想不改变格式将一个表格的数据全部复制过来,有两种方法: 一.不打开要复制的表格,直接将这个表 ...
iview table数据直接导出_(excel表格数据导入导出)iView如何实现excel导入导出
请问:ERP系统的数据怎么导出Excel和Excel的数据怎么导入ERP? 一般的方法是: 在你找那个数据页面会有数据输出选项--点击然后到登陆ERP的第一个远程桌面,会有一个资料夹 (各公司的命名 ...
excel通过js导入到页面_基于Excel和Java自动化工作流程：发票生成器示例
对于销售人员,使用Excel创建发票是很常见的.但是该过程通常涉及许多容易出错的手动操作,例如输入数据,复制/粘贴等.如何实现一个可以将数据从数据库自动填充到发票Excel模板中,而无需再辛苦手动输入 ...
c datatable导入mysql_《项目经验》–简单三层使用DataTable向数据库表批量导入数据—向SqlServer一张表中导入数据 | 学步园...
向数据库的一张表中添加数据,可以采用单个添加,即一条数据.一条数据的添加:也可以采用批量导入,依次将好些条数据写入数据库的一张表中.文本借助实例<添加系列信息>讲解一种向数据库批量导入数据 ...
SQL SERVER 与ACCESS、EXCEL的数据导入导出转换
* 说明:复制表(只复制结构,源表名:a 新表名:b) select * into b from a where 1<>1 * 说明:拷贝表(拷贝数据,源表名:a 目标表名:b ...

v u e + ts excel表的导入解析转换加下载excel表格式（个人笔记）

v u e + ts excel表的导入解析转换加下载excel表格式（个人笔记）相关推荐

最新文章

热门文章

v u e + ts excel表的导入解析转换 加下载excel表格式（个人笔记）

v u e + ts excel表的导入解析转换 加下载excel表格式（个人笔记）相关推荐

最新文章

热门文章

v u e + ts excel表的导入解析转换加下载excel表格式（个人笔记）

v u e + ts excel表的导入解析转换加下载excel表格式（个人笔记）相关推荐