美文网首页
angluar导入功能

angluar导入功能

作者: 阿凯_8b27 | 来源:发表于2019-07-18 09:36 被阅读0次

1.下载xlsx类库,npm install xlsx --save

2.html,使用input标签,可以自定义样式,进行文件上传

 <a href="javascript:;" class="file">

                <input  type="file" name="" (change)="importf($event)" accept="application/vnd.ms-excel,.xlsx,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"

                id="" />导入数据

 </a>
3.ts,接受文件类型,进行解析

import * as XLSX from 'xlsx'; //引入核心类

inputdata: any; //定义转换后的数据

  importf(evt: any) { //input的change时间

    /* wire up file reader */

    const target: DataTransfer = <DataTransfer>(evt.target); //接受文件

    if (target.files.length !== 1) throw new Error('Cannot use multiple files');

    const reader: FileReader = new FileReader(); //采用reader解析文件

   let max = target.files[0].size; //取得文件带下

    let that = this;//修改作用域

    reader.onprogress = function (evt)  //处理进度条

    {

      that.Percent = evt.loaded/max *100 ;

    }

    reader.onload = (e: any) => { //文件读取完毕

      /* read workbook */

      const bstr: string = e.target.result; //获取解析后的文件

      const wb: XLSX.WorkBook = XLSX.read(bstr, { type: 'binary' }); //采用类库进行解析

      /* grab first sheet */

      const wsname: string = wb.SheetNames[0];

      const ws: XLSX.WorkSheet = wb.Sheets[wsname];

      /* save data */

      this.inputdata = (XLSX.utils.sheet_to_json(ws));

      console.log(this.inputdata)

      this.updon(this.inputdata);

      evt.target.value = "" // 清空

    };

    reader.readAsBinaryString(target.files[0]);

  }

  updon(data) {

// 实现自己的业务,调用接口

    this.toolService.Import(this.checkData(data)).then(data => {

      if(data.Result == 0){

        this.message.success('导入成功');

      }else{

        this.message.error('导入失败');

      }

    });

  }

相关文章

  • angluar导入功能

    1.下载xlsx类库,npm installxlsx --save 2.html,使用input标签,可以自定义样...

  • angluar

    ng-app VS data-ng-app data-ng-app——表明这是angular 要处理的元素 带你进...

  • 批量导入的详细设计说明

    一、批量导入功能的需求分析 批量导入的功能,大量地用在后台产品的设计中,批量导入功能如果设计得好,可以大大提高使用...

  • 详解批量导入功能

    批量导入功能的需求分析 批量导入的功能,大量地用在后台产品的设计中,批量导入功能如果设计得好,可以大大提高使用者的...

  • 扫描全能王--快速把纸质文字电子化

    -------时间管理之八十七讲 一、功能介绍: 有拍照生成的功能和导入图片倒入生成的功能。导入图...

  • 关于管理后台和B端产品数据批量导入功能的产品思考

    最近在做后台管理相关的功能,处理数据的时候,涉及到了数据批量导入功能,之前也做过批量导入,这里想聊聊自己对这个功能...

  • 七、sass - import导入

    文件导入Sass 拓展了 @import 的功能,允许其导入 .scss 或 .sass 文件。被导入的文件将合并...

  • HTML自适应表格制作

    Dreamweaver的“表格式数据导入(T)”功能依据:Dw的“表格式数据导入(T)”功能可以将存有表格数据的U...

  • jQLite

    angular内部封装了基本的JQ功能。但是,如果要使用全部功能的话,同样需要导入jqery库。而且在导入jque...

  • 纯前端利用 js-xlsx 实现 Excel 文件导入导出功能示

    详细说明请阅读:纯前端利用 js-xlsx实现 Excel 文件导入导出功能(1) 导入功能实现 官方示例:htt...

网友评论

      本文标题:angluar导入功能

      本文链接:https://www.haomeiwen.com/subject/aklklctx.html