angular FileSaver、XLSX 导入导出

本文章记录了在工作过程中，文件导入导出功能的实现。

需要安装和引入

import * as XLSX from 'xlsx';
import * as FileSaver from 'file-saver';

一、文件的导出两种方式：

推荐大家使用方式一，方式一比较灵活，如果导出的部分确定只是表格的话，方法二也是很方便的。

方式一：页面按钮调用代码方法即可。

exportTest():void{
    const data = [
          ['1','a','aa'],
          ['2','b','bb'],
          ['3','c','cc']
        ];
    /* generate worksheet */
    const ws: XLSX.WorkSheet = XLSX.utils.aoa_to_sheet(data);
    const ws2: XLSX.WorkSheet = XLSX.utils.aoa_to_sheet(data);
    /* generate workbook and add the worksheet */
    const wb: XLSX.WorkBook = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
    XLSX.utils.book_append_sheet(wb, ws2, 'Sheet2');
    console.log(wb)
    /* save to file */
    XLSX.writeFile(wb, 'SheetJS.xlsx');
  }

方式二：页面按钮调用代码方法即可。

export():void{
    const exportArr = [];
     for(let i=0;i<6;i++) {
      const obj = {"名称":"张三","年龄":18};
      exportArr.push(obj);
    }   
    //将JSON数组转换为表格格式
    const worksheet: XLSX.WorkSheet = XLSX.utils.json_to_sheet(exportArr);
    const workbook: XLSX.WorkBook = { Sheets: { 'data': worksheet }, SheetNames: ['data'] };
    const excelBuffer: any = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
    const fileName = "testFile";
    const data: Blob = new Blob([excelBuffer], {
      type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8'
    });
    FileSaver.saveAs(data, fileName + '.xlsx');
  }

二、文件的导入：

上面导出方式都可以用下面的方式处理，获取文件内容后，根据自己情况解析就行！

init():void{
 $('#fileList').change(function () {
    that.importSure();
 });
}
import():void{
    $("#fileList").click();
}

importSure():void{
    const that = this;
    const xlsxFile = $('#fileList')[0].files[0];
    const index = xlsxFile.name.lastIndexOf(".");
    if (index !== -1) {
      const ext = xlsxFile.name.substr(index+1).toLowerCase();
      if (ext !==  'xls' && ext !==  'xlsx') {
        alert('只能上传.xlsx、.xls文件');
        return;
      }
    } else {
      alert('只能上传.xlsx、.xls文件');
      return;
    }
    let wb; //读取Excel的数据
    const reader = new FileReader();
    reader.readAsArrayBuffer(xlsxFile);
    reader.onload = function (e) {
      const data = this.result;
      wb = XLSX.read(data, { type: 'array'});
      const oldExcelTab = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]],{raw:true, header:1});

      // oldExcelTab 可能包含空行，要把空行去掉
      const excelTab = [];
      for (let i=0;i<oldExcelTab.length;i++) {
        const excelOne = oldExcelTab[i];
        // @ts-ignore
        if (excelOne.length > 0) {
          excelTab.push(excelOne);
        }
      }
     
      let keysData = [];
      // @ts-ignore
      keysData = excelTab[0]; //表头数组
      if(keysData.length === 2){
        if (keysData[0] === "名称 && keysData[1] === "年龄"){
         for (let i=1;i< 6;i++) {
             //文件的内容
             console.log(excelTab[i][0])
             console.log(excelTab[i][1])
         }
        } else {
          alert("导入文件不符合要求!!!");
        }
      }else {
        alert("导入文件不符合要求!!!");
      }
    };
}

<button (click)="import()"> 导入 </button>
<div style="display: none">
    <input type="text"id="importText"/>
    <input type="file" accept="application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" id="fileList">
</div>

上面代码，自己写的测试没有问题的！从自己代码中摘出来的时候，删去了针对自己项目需求的特别处理，运行时如果有问题，稍微调试下就可以了哦！

好用记得点赞。。。