用js-xlsx进行excel表的导入和导出

首先安装xlsx包          npm install xlsx --save

在页面中引用 import * as XLSX from  'xlsx'

在 页面结构

选择文件后，确认导入前

ts文件里面onFileChange方法详情

onFileChange(evt:any) {

/* wire up file reader */

  this.rows = [];  // 列表表格

  const target: DataTransfer = (evt.target);

  if (target.files[0]) {

const fileName = target.files[0].name;

    const IMPORTFILE_MAXSIZE =2 *1024;

    if (!/\.xl.{1,2}$/.test(fileName)) {

this.canImport =false;

      this.toaster.pop('error', '格式', '文件格式不正确');

      return;

    }

if (target.files[0].size /1024 > IMPORTFILE_MAXSIZE) {

this.canImport =false;  //  文件上传按钮置为不可点

      this.toaster.pop('error', '大小', '选择的文件不能超过2MB');

      return;

    }

const reader: FileReader =new FileReader();

    reader.onload = (e:any) => {

/* read workbook */

      this.canImport =true;

      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.importUserList = XLSX.utils.sheet_to_json(ws, {header:1});

      this.importUserList.splice(0, 1); // 去掉表头

      this.importUserList.forEach(item => {

const user = {

            name: item[0],

          enterprise: item[1],

          mobile: item[2],

          status:'unprocessed'

        };

        this.rows.push(user);

      });

    };

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

  }

}

点击确认导入之后 会进行人员的导入， 导入状态是导入人员数据的一个表现，如图所示

点击确认导入之后的界面

确认导入触发的方法如下