Angular 5下载带有发布请求的excel文件

Posted 2023-03-15

【中文标题】Angular 5下载带有发布请求的excel文件

【英文标题】：Angular 5 download excel file with post request

【发布时间】：2018-08-31 12:40:50

【问题描述】：

我遇到了一个问题，我使用 Angular 1 下载了 Excel 文件，但如果我在 Angular 5 中实现相同的代码，则会显示文件已损坏的错误。我的回复在 ArrayBuffer 中，我无法读取该文件。

下面是我的代码：

服务：

 DownloadData(model:requiredParams):Observable<any>
  const headers = new Headers();
  const requestOptions = new RequestOptions( headers: headers );
  requestOptions.headers.append('Content-Type', 'application/json');

   const body = JSON.stringify(model);
  return this.http.post(url, body, requestOptions)
  .map((res:any) => res)
 .catch((e: any) => Observable.throw(this.errorHandler(e)));
 

组件：

exportToExcel() 
    this.loadingOverlayFlag = true;
   this.podashboardService.DownloadData(this.data).subscribe(result=>
    console.log(result);
    this.downloadFile(result._body,'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 'export.xlsx');
  )
  

 downloadFile(blob: any, type: string, filename: string) 

 var binaryData = [];
   binaryData.push(blob);

     const url = window.URL.createObjectURL(new Blob(binaryData, type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet")); // <-- work with blob directly

     // create hidden dom element (so it works in all browsers)
     const a = document.createElement('a');
     a.setAttribute('style', 'display:none;');
     document.body.appendChild(a);

     // create file, attach to hidden element and open hidden element
     a.href = url;
     a.download = filename;
     a.click();

   

我可以下载文件，但无法读取其内容。错误是：

Microsoft Excel Excel 无法打开文件“███████ DASHBOARD (5).xlsx”，因为文件格式或文件扩展名无效。 验证文件没有损坏并且文件扩展名与文件格式匹配。好的

【问题讨论】：

你不需要改变你的http头吗？检查这个：***.com/questions/4212861/…

它应该是什么？

requestOptions.headers.append('Content-Type', 'application/msword');

【参考方案1】：

下载使用文件保护程序找到的 exel 文件的最简单方法在这里：

//Declaration
headers: HttpHeaders;
options: any;

 //Constructor or u can have for specific method
 this.headers = new HttpHeaders( 'Content-Type': 'application/json' );
    this.options = 
        observe: 'response',
        headers: this.headers,
        responseType: 'arraybuffer'
    ;

 //Service request:
  this.httpClient.post('http://localhost:8080/api/report', this.data, this.option)
  .pipe(
  catchError(err => this.handleError(err))
    ).subscribe(response => 
        Helper.exportExelFile(response, 'FileName');
    );

//component or in helper function in one class

import * as FileSaver from 'file-saver';
 function exportExelFile(data, filename) 
const blobValue = new Blob([data['body']], 
    type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
);
 FileSaver.saveAs(blobValue, filename + '.' + FileType.EXCEL);


export const Helper = 
  exportExelFile
   ;

【参考方案2】：

我设法通过使用 httpClient 使其工作（httpOptions 中的 responseType: 'arraybuffer' 成功了）。

createReportBackend() 

    const httpOption: Object = 
      observe: 'response',
      headers: new HttpHeaders(
        'Content-Type': 'application/json'
      ),
      responseType: 'arraybuffer'
    ;

    this.httpClient.post('http://localhost:8080/api/report', this.data, httpOption)
      .pipe(map((res: HttpResponse) => 
        return 
          filename: 'Drinks.xlsx',
          data: new Blob(
            [res['body']],
             type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
          ),
        ;
      ))
      .subscribe(res => 
        if (window.navigator.msSaveOrOpenBlob) 
          window.navigator.msSaveBlob(res.data, res.filename);
         else 
          const link = window.URL.createObjectURL(res.data);
          const a = document.createElement('a');
          document.body.appendChild(a);
          a.setAttribute('style', 'display: none');
          a.href = link;
          a.download = res.filename;
          a.click();
          window.URL.revokeObjectURL(link);
          a.remove();
        
      , error => 
        throw error;
      , () => 
        console.log('Completed file download.');
      );
  

【讨论】：

您先生，至少让我免于在互联网上摸索一个小时以寻求帮助。谢谢。

【参考方案3】：

我整天都在为这个而苦苦挣扎。替换 angular HttpClient 并使用 XMLHttpRequest 如下：

var oReq = new XMLHttpRequest();
  oReq.open("POST", url, true);
  oReq.setRequestHeader("content-type", "application/json");
  oReq.responseType = "arraybuffer";

  oReq.onload = function (oEvent) 
    var arrayBuffer = oReq.response;
    if (arrayBuffer) 
      var byteArray = new Uint8Array(arrayBuffer);
      console.log(byteArray, byteArray.length);
      this.downloadFile(byteArray, 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 'export.xlsx');
    
  ;

  oReq.send(body);

然后在你的downloadFile函数中修改了Blob的创建：

const url = window.URL.createObjectURL(new Blob([binaryData]));

在您的情况下，服务将如下所示：

DownloadData(model:requiredParams):Observable<any>
  return new Observable(obs => 
    var oReq = new XMLHttpRequest();
    oReq.open("POST", url, true);
    oReq.setRequestHeader("content-type", "application/json");
    oReq.responseType = "arraybuffer";

    oReq.onload = function (oEvent) 
      var arrayBuffer = oReq.response;
      var byteArray = new Uint8Array(arrayBuffer);
      obs.next(byteArray);
    ;

    const body = JSON.stringify(model);
    oReq.send(body);
  );

然后是组件：

exportToExcel() 
  this.loadingOverlayFlag = true;
  this.podashboardService.DownloadData(this.data).subscribe(result=>
    // console.log(result);
    this.downloadFile(result,'application/vnd.openxmlformats-
    officedocument.spreadsheetml.sheet', 'export.xlsx');
  )


downloadFile(blob: any, type: string, filename: string) 

  var binaryData = [];
  binaryData.push(blob);

  const url = window.URL.createObjectURL(new Blob(binaryData,  type: filetype )); // <-- work with blob directly

   // create hidden dom element (so it works in all browsers)
   const a = document.createElement('a');
   a.setAttribute('style', 'display:none;');
   document.body.appendChild(a);

   // create file, attach to hidden element and open hidden element
   a.href = url;
   a.download = filename;
   a.click();

【讨论】：

这让它在修复后在 Edge 中为我工作，但从 Chrome 下载相同的文件无法修复它。谢谢你让我更近了一步。 :)