Как скачать файл Excel в Angular с помощью File Saver - PullRequest
Новая
       5

Как скачать файл Excel в Angular с помощью File Saver

1 голос
/ 05 марта 2020

Я создал почтовую форму в PHP, где при нажатии на кнопку она загружала файл Excel, и у меня были некоторые данные формы, также опубликованные по URL и файлу, которые использовались для успешной загрузки с помощью простого HTML и отправки формы

В PHP эта функция срабатывает, когда форма отправляется в файл 

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');
}

Когда она работала, ниже в пункте «Заголовки запроса» указана ниже вещь

enter image description here

И в ответе ничего не показывалось

enter image description here

Но сейчас мы пытаемся мигрировать Интерфейс к Angular Framework, из которого мы можем загрузить файл, я попробовал его путь 

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; boundary angular, а также, когда я вижу на вкладке ответа, он показывает некоторые данные, как показано ниже.

enter image description here Можете ли вы помочь мне, как добиться загрузки в Angular я В этой ситуации

1 Ответ

1 голос
/ 10 марта 2020

Это правильно для Content-Type в вашем заголовке запроса , поскольку вы действительно публикуете formDataForExport через php бэкэнд.

Но способ обработки ответа кажется неправильным. Предлагаемое ниже решение может помочь:

Предполагается, что если вы ссылаетесь на этот файл-заставку:

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'
  });
}
...