• 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});}});// filterresults.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版本有关}}