Angular7 + Excel导出

• EXCEL导出

• 参考文章

• http://www.voidcn.com/article/p-pbngeefx-btn.html

• 需求

现在需要做一个动态列表的导出功能，为什么说是动态列表呢，因为如下列表是通过配置平台配置，自动生成Table数据表格。

• 问题

写完ctrl层直接利用Postman测试，如果是直接利用写入C盘的方式是可以导出Excel的，但是这个会导致写到服务器的C盘，而不是客户的电脑，如果想要通过调起浏览器插件，同样的代码【另外写了一份调起浏览器插件的代码】，浏览器访问接口路径回车可以直接下载，但是通过前端的click事件，下载不成功！百思不得姐。。。。

• 解决办法

修改下载为前端下载，后台java不编写代码【注意适合简单excel导出】

• 代码[参考别人的]

• ts

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

 exportList(){
        let json = [];
        //这个nameList (随便起的名字)，是要导出的json数据
        const worksheet: XLSX.WorkSheet = XLSX.utils.json_to_sheet(json);
        const workbook: XLSX.WorkBook = { Sheets: { 'data': worksheet }, SheetNames: ['SheetName'] };
        const excelBuffer: any = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
        //这里类型如果不正确，下载出来的可能是类似xml文件的东西或者是类似二进制的东西等
        this.saveAsExcelFile(excelBuffer, "nameList");
    }
    private saveAsExcelFile(buffer: any, fileName: string) {
        const data: Blob = new Blob([buffer], {
            type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8'
        });
        FileSaver.saveAs(data, fileName + '_' + new Date().getTime() + '.xls');
        // 如果写成.xlsx,可能不能打开下载的文件，这可能与Excel版本有关
    }

• component.html

<button nz-button [nzType]="'primary'" (click)="exportList()" >
    <span>Click me!</span>
</button>

• 修改成符合自己业务的代码

• import {Component, OnInit} from '@angular/core';
  import * as FileSaver from 'file-saver';//浏览器读取本地的文件已经保存文件所需要的依赖。
  import * as XLSX from 'xlsx';
  import {GisquerylistService} from '../../../services/framework/gisquerylist.service';
  import {HttpClient} from '@angular/common/http';
  
  //数据导出导入所需要的依赖
  
  @Component({
      selector: 'app-demo1',
      templateUrl: './demo1.component.html',
  })
  export class Demo1Component implements OnInit {
      ngOnInit(): void {
      }
  
  
      constructor(private http: HttpClient) {
      }
  
      exportList() {
          // {"XZQDMMC": "浙江省"} 即数据结构是{title:value}
          var excelData: any[] = [];
  
          var data = [];
  
          var isShowFieldList = [];
  
          this.http.get('http://192.168.10.248:21018/gisq/querylist/service/api/query/getQuery?baseGuid=61ea2e04-9aee-4bae-b1c5-c2e779f11387&queryBuilder=%7B%22pageCurrent%22%3A1%2C%22orders%22%3A%22%22%2C%22pageSize%22%3A1000%2C%22qureyAnd%22%3A%5B%5D%7D&userId=8c7d3682-c080-4d4a-947f-af08e64576a2&type=null').subscribe((res: any) => {
                  var datas = res.data;
                  var results = datas.results;
                  var fieldLists = datas.fieldList;
  
                  //去掉isHide为1的部分重新封装数组
                  fieldLists.forEach((fieldList: any) => {
                      if (fieldList.isHide === 0) {
                          // {"name": "项目名称","fieldName": "XM_MC"}
                          isShowFieldList.push({
                              name: fieldList.name,
                              fieldName: fieldList.fieldName,
                              isHide: fieldList.isHide
                          });
                      }
                  });
  
  
                  // filter
                  results.forEach((result: any) => {
                      var str = '';
  
                      // {"XZQDMMC": "浙江省"} <=替换成=> {"行政区": "浙江省"}
                      isShowFieldList.forEach((showFieldList: any, index: number) => {
                              for (var key in result) {
  
                                  if (key === showFieldList.fieldName) {
                                      var str1 = `"${showFieldList.name}":"${result[key]}"`;
                                      str = str + str1 + ',';
                                  }
                              }
                          }
                      );
                      str = str.substr(0, str.length - 1);
                      data.push(JSON.parse(`{${str}}`));
                  });
              },
              error1 => {
                  console.log(error1);
              },
              () => {
                  let json = data;
  
                  //这个nameList (随便起的名字)，是要导出的json数据
                  const worksheet: XLSX.WorkSheet = XLSX.utils.json_to_sheet(json);
                  const workbook: XLSX.WorkBook = {Sheets: {'data': worksheet}, SheetNames: ['data']};
                  const excelBuffer: any = XLSX.write(workbook, {bookType: 'xlsx', type: 'array'});
                  //这里类型如果不正确，下载出来的可能是类似xml文件的东西或者是类似二进制的东西等
                  this.saveAsExcelFile(excelBuffer, 'nameList');
  
              }
          );
      }
  
      private saveAsExcelFile(buffer: any, fileName: string) {
          const data: Blob = new Blob([buffer], {
              type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8'
          });
          FileSaver.saveAs(data, fileName + '_' + new Date().getTime() + '.xls');
          // 如果写成.xlsx,可能不能打开下载的文件，这可能与Excel版本有关
      }
  
  }