将excel数据解析成Json格式数据!-程序员宅基地

技术标签: ViewUI  开发工具  前端  json  

废话不说,直接上代码 首先前端是一个上传文件的组件,第一步加载文件,第二部导入,在导入的时候就会触发方法对Excel进行解析,转化为json数据!

   accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
   chooseLabel="批量申请" uploadLabel="批量导入" cancelLabel="取消导入" customUpload="true"
   (uploadHandler)='uploadHandler($event)'>
</p-fileUpload>
复制代码

前端的效果就是这样子的:

下面就是主要怕的转化js:


/**
* 将解析的json数据分装到一个临时数组
*  @param event 
*/
uploadHandler(event) {
    this.parseXlsxToJson(event.files[0]).subscribe(resp => {
      this.up = resp;
      this.up.forEach(element => {
        // delete element['xuhao'];
        element['字段1'] = element['字段1'].trim(); //
        element['字段2'] = element['字段2'].trim(); //
      });
      console.log("打印up")
      console.log(this.up)
      if (this.up.length != 0) {
        this.msgs = [{ severity: 'success', summary: '', detail: '模板导入成功!' }];
      }
      else {
        this.msgs = [{ severity: 'error', summary: '', detail: '模板数据为空,请核对!' }];
      }
    });
  }

  /**
   * 将excel数据解析成Json格式数据
   * 将json数据对象的属性名称转换成字段名称
   * @param fileData 
   */
  parseXlsxToJson(fileData: Blob): Observable<any> {
    return this.parseXlsx(fileData, (ws) => {
      // 将json数据对象的属性名称转换成字段名称
      this.fileSource.next(XLSX.utils.sheet_to_json(ws, {
        raw: false, range: 1, header:
          ['字段1', '字段2']
      }));
    });
  }

  /**
  *解析excel内容
  */
  private parseXlsx(fileData: Blob, callBack: Function): Observable<any> {
    this.reader.onload = function (e) {
      const data = new Uint8Array(e.target['result']);
      const workbook = XLSX.read(data, { type: 'array' });
      const wsname: string = workbook.SheetNames[0];
      const ws = workbook.Sheets[wsname];
      callBack(ws);
    };
    this.reader.readAsArrayBuffer(fileData);
    if (this.fileSource) {
      this.fileSource = new Subject();
    }
    return this.fileSource.asObservable();
  }
复制代码

下面是转化的json:

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/hjq_xdd/article/details/101084465

智能推荐

病毒木马查杀实战第018篇:病毒特征码查杀之基本原理-程序员宅基地

文章浏览阅读1.7k次。前言 在本系列的导论中,我曾经在“病毒查杀方法”中简单讲解过特征码查杀这种方式。而我也在对于实际病毒的专杀工具编写中,使用过CRC32算法来对目标程序进行指纹匹配,从而进行病毒判定。一般来说,类似于MD5以及CRC32这样的算法,在病毒大规模爆发时是可以提高查杀效率的,但是传统的更为常用的方法是采用以静态分析文件的结构为主并结合动态分析的方法,通过反汇编来寻找病毒的内容代码段、

问题解决方法论(解决bug)_解bug的方法论-程序员宅基地

文章浏览阅读4.9k次。1:导入模块注意,先导入系统模块,再第三方模块,最后是程序模块.2:变量要不要设置成self,要看这个变量的生命周期.如果在函数外还要用,就加self.如果只是暂时用下,不用self也行.3:初始化的时候,self.x,如果被赋值成一个对象.那么在本对象的方法里,就可以通过这个对象属性调用一些这个对象的方法.比如游戏这个对象的方法,可以封装一个英雄开火的方法.游戏对象调用精灵组的方法,比..._解bug的方法论

增长黑客理论(AARRR)模型_增长黑客模型-程序员宅基地

文章浏览阅读7.4k次,点赞2次,收藏11次。刷朋友圈时,看见一位做爬虫工程师的朋友介绍自己转型成了增长黑客。脑子一愣,增长黑客是啥?我现在已经这么落后了吗?再一次为自己知识的贫乏而落泪。怀着憧憬的心情,上网学习了下。 增长黑客理论什么是增长黑客(Growth hacker)?增长黑客是一群以数据驱动营销,以市场指导产品,通过技术化手段贯彻增长目标的人。..._增长黑客模型

LeetCode -- Dungeon Game_dungeon game leetcode 水中的鱼-程序员宅基地

文章浏览阅读583次。LeetCode -- Dungeon Game_dungeon game leetcode 水中的鱼

oracle spool简介+sql plus set常用设置-程序员宅基地

文章浏览阅读181次。利用Oracle中的Spool缓冲池技术可以实现Oracle数据导出到文本文件;SPOOL是SQLPLUS的命令,不是SQL语法里面的东西。对于SPOOL数据的SQL,最好要自己定义格式,以方便程序直接导入,SQL语句如:select taskindex||'|'||commonindex||'|'||tasktype||'|'||to_number(to_char..._sqlplus spool if

imx8mm yocto_bsp 编译-程序员宅基地

文章浏览阅读2k次。在实际的项目中,根据使用的具体版本来进行下载。其中-b 选在分支https://source.codeaurora.org/external/imx/imx-manifest/tree/README?h=imx-linux-zeusmkdir imx-yocto-bspsudo chmod 777 imx-yocto-bspcd imx-yocto-bsprepo init -u https://source.codeaurora.org/external/imx/imx-manifes._imx8mm yocto

随便推点

易到高额奖励政策的背后:不差钱了?-程序员宅基地

文章浏览阅读55次。近日,易到在上海开始奖励车主了, 据说车主每天最高可获得120元的奖励金。这个奖励额度是前所未有的,易到突然推出高额奖励政策,是在释放一个什么信号?不差钱了?如果是不差钱了,那么钱从哪里来?是韬蕴资本又注入资金了,还是引进了新的投资方?无论何种情况,易到这一政策都对外释放了一个积极信号,有网友评论称,易到这次表现的很真诚!易到这次的奖励金政策首先在上海实施,并将在全国各业务城市逐步推开...

linux中mkswap命令使用方法,mkswap命令_Linux mkswap 命令用法详解:建立和设置SWAP交换分区...-程序员宅基地

文章浏览阅读477次。mkswap命令用于在一个文件或者设备上建立交换分区。在建立完之后要使用sawpon命令开始使用这个交换区。最后一个选择性参数指定了交换区的大小,但是这个参数是为了向后兼容设置的,没有使用的必要,一般都将整个文件或者设备作为交换区。语法mkswap(选项)(参数)选项-c:建立交换区前,先检查是否有损坏的区块;-f:在SPARC电脑上建立交换区时,要加上此参数;-v0:建立旧式交换区,此为预设值;..._mkswap: warning: truncating swap area to 17179869184 kib

安装和配置:Win10环境下安装PostgreSQL详细步骤以及第一次运行_pgadim 配置-程序员宅基地

文章浏览阅读3.8k次,点赞16次,收藏8次。不多赘述。直接上地址和教程!!官网地址:https://www.enterprisedb.com/1、首先进入官网,如果怕麻烦,我是直接点击下载地址下载对应的版本,如果英文水平不够,可以使用谷歌浏览器打开,自动翻译。2、获得安装程序 一直next,到这,输入你自己想要设置的 数据库超级用户和创建的OS用户的 密码、注:数据库超级用户是一个非管理员账户,这是为..._pgadim 配置

qt creator 遇到问题 记录 LTS_creator地址持仓占比不正常(12%)-程序员宅基地

文章浏览阅读536次。问题1 :QT creator 代码中有中文,提示常量中有换行符解决方案使用QT Creator写代码时,代码中含有中文,编译时提示常量中有换行符,网上搜了很多如何解决该问题的答案,都不好使。琢磨之后发现只需两步操作就可解决:第一步:打开一个项目,工具-选项-文本编辑器,在文本编辑器界面的文本编码地方选择默认编码选择UTF-8;UTF-8 BOM选择 如果编码是UTF-8则添加;做完以..._creator地址持仓占比不正常(12%)

ListView流畅度翻倍!Flutter卡顿分析和优化方案-程序员宅基地

文章浏览阅读705次,点赞21次,收藏12次。由于文章篇幅原因,我只把面试题列了出来,详细的答案,我整理成了一份PDF文档,这份文档还包括了还有高级架构技术进阶脑图、Android开发面试专题资料,高级进阶架构资料 ,帮助大家学习提升进阶,也节省大家在网上搜索资料的时间来学习。每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频**如果你觉得这些内容对你有帮助,可以添加下面V无偿领取!(备注Android)[外链图片转存中…(img-zGMA0wOb-1710845243006)]

java中random的头文件_JAVA中的Random()函數-程序员宅基地

文章浏览阅读278次。Java中存在着兩種Random函數:一、java.lang.Math.Random;調用這個Math.Random()函數能夠返回帶正號的double值,該值大於等於0.0且小於1.0,即取值范圍是[0.0,1.0)的左閉右開區間,返回值是一個偽隨機選擇的數,在該范圍內(近似)均勻分布。例子如下:packageIO;importjava.util.Random;public classTestR..._java中的随机数头文件

推荐文章

热门文章

相关标签