如何使用File Saver在Angular中下载Excel文件 [英] How to Download Excel file in Angular using File Saver

问题描述

我已经用PHP创建了发布表单，单击该按钮便下载了一个excel文件，同时我还将一些表单数据发布到了URL和文件中，这些文件用于通过纯HTML成功下载并提交表单

I had created post form in PHP where on clicking the button it was downloading an excel file and I had some form data also posted to the URL and file used to download successfully with plain HTML and submit form

在PHP中，这是将表单发布到文件时触发的功能

In PHP this is function triggered when the form is posted to the file

public function downloadExcel($fileName = '', $addTimeStamp = true) {
    $fileName = (!$fileName) ? 'excel_download' : preg_replace('/\s+/', '_', $fileName);
    if ($addTimeStamp) {
        $fileName .= date('_d_m_Y_H_i_s');
    }
    $fileName .= '.xlsx';
    $this->setActiveSheetIndex(0);
    header('Content-Type: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');
    header('Content-Disposition: attachment;filename="' . $fileName . '"');
    header('Cache-Control: max-age=0');
    header('Cache-Control: max-age=1');
    header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');
    header('Last-Modified: ' . gmdate('D, d M Y H:i:s') . ' GMT');
    header('Cache-Control: cache, must-revalidate');
    header('Pragma: public');
    $objWriter = PHPExcel_IOFactory::createWriter($this, 'Excel2007');
    $objWriter->save('php://output');
}

工作正常时，我在请求标头"中设置了以下内容

When it was working, I have below thing set in the Request Headers

在响应中什么也没显示

但是现在我们正在尝试将前端迁移到可以从中下载文件的Angular框架，我已经尝试了他的方式

But now we are trying to migrate frontend to the Angular framework from which we are able to download the file, I have tried his way

downloadTheExport() {
  this.downloadfile().subscribe((blob: any) => {
    const blobdownload = new Blob([blob], { type: "application/vnd.ms-excel;charset=utf-8" });
    saveAs(blobdownload, 'testdata.xls');
  });
}

downloadfile(){
  const formDataForExport: FormData = new FormData();
  formDataForExport.append('export', 'ALL');

  return this.http.post('http://localhost:8080/service/exportExcel.php', formDataForExport, {
    headers: { 'Accept': 'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9' }
  });
}

当我尝试在Angular中下载此文件时，我发现当在Angular中进行调用时，Content-Type的请求标头似乎已更改为 Content-Type:multipart/form-data;.边界角，并且当我在响应"选项卡中看到它时，它还会显示一些数据，如下所示.

And When I am trying to download this in Angular I have observed that when the Call is made in Angular it seems Request header for Content-Type is changed to Content-Type: multipart/form-data; boundary angular and also when I see in the response tab it showing some data as below.

在这种情况下，能否请您帮我实现Angular下载

Can you please help me how to achieve downloading in Angular in this situation

推荐答案

在 Request标头中，对于 Content-Type 来说是正确的，因为您确实通过以下方式发布了formDataForExportphp后端.

It is correct for the Content-Type in your Request header since you indeed post a formDataForExport via php backend.

但是处理响应的方法似乎是错误的.我提出以下解决方案可能会有所帮助:

But the way to handle the response seems wrong. I propose a solution below may help:

假设您正在引用该文件，则保存程序:

Assuming if you are referencing this fileSaver:

https://github.com/Hipparch/file-saver-typescript/blob/master/file-saver.ts

由于要处理不同的浏览器行为来保存文件，因此建议包括上述脚本并使用它，因为它很复杂，不利于重新实现它们.

downloadTheExport() {
  this.downloadfile().subscribe((resp: any) => {
    const fileSaver: any = new FileSaver();
    fileSaver.responseData = resp.body;
    fileSaver.strFileName = 'testdata.xls';
    fileSaver.strMimeType = 'application/vnd.ms-excel;charset=utf-8';
    fileSaver.initSaveFile();
  });
}

downloadfile() {
  const formDataForExport: FormData = new FormData();
  formDataForExport.append('export', 'ALL');

  return this.http.post('http://localhost:8080/service/exportExcel.php', formDataForExport, {
    headers: { 'Accept': 'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9' },
    responseType: 'blob',
    observe: 'response'
  });
}

这篇关于如何使用File Saver在Angular中下载Excel文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！