如何在Angular 4中下载excel / Zip文件
我使用angular4作为叶末和stream明5.4作为后端。
我的要求是导出一些数据为excel和zip文件。
从'file-saver/FileSaver';使用import { saveAs } 'file-saver/FileSaver'; 打包文件下载。
Angular 4代码：
downloadExcel() { const type = 'application/vnd.ms-excel'; const headers = { headers: new Headers({ 'Accept': type }) }; const filename = 'file.xls'; this.http.get('http://10.2.2.109/Download/exportExcel', headers) .toPromise() .then(response => this.saveToFileSystem(response, type, filename)); return false; } private saveToFileSystem(response, __type, filename) { const contentDispositionHeader: string = response.headers.get('Content-Disposition'); if (contentDispositionHeader !== null) { const parts: string[] = contentDispositionHeader.split(';'); //const filename = parts[1].split('=')[1]; const blob = new Blob([response._body], { type: __type }); saveAs(blob, filename); } else { alert('Cant download.....'); // handling download condition if content disposition is empty const blob = new Blob([response._body], { type: __type }); saveAs(blob, filename); } }
stream明码
public function exportExcel(Request $request) { $file = storage_path(); $file_name = 'book1.xls'; $headers = [ 'Content-type' => 'application/vnd.ms-excel', 'Content-Disposition' => 'attachment;filename="' . $file_name, 'X-Filename' => $file_name, 'Content-Transfer-Encoding' => 'binary', 'Content-Length' => filesize($file . '/' . $file_name), 'Cache-Control' => 'max-age=0', 'Cache-Control' => 'max-age=1', 'Expires' => 'Mon, 26 Jul 1997 05:00:00 GMT', 'Last-Modified' => gmdate('D, d MYH:i:s') . ' GMT', 'Cache-Control' => 'cache, must-revalidate', 'Pragma' => 'public', 'Set-Cookie' => 'fileDownload=true; path=/', 'Access-Control-Expose-Headers' => 'Content-Length,Cache-Control,Content-Language,Content-Type,Expires,Last-Modified,Pragma' ]; return response()->download($file . '/' . $file_name, $file_name, $headers); }
问题
-
const contentDispositionHeader: string = response.headers.get('Content-Disposition');似乎总是空的。 - 我们不能打开下载的文件，显示损坏的消息。
- 它为文本文件下载工作
请帮我解决这个问题。 或者指定任何其他工作代码//包的angular度
尝试这个：
downloadExcel() { const type = 'application/vnd.ms-excel'; const filename = 'file.xls'; const options = new RequestOptions({ responseType: ResponseContentType.Blob, headers: new Headers({ 'Accept': type }) }); this.http.get('http://10.2.2.109/Download/exportExcel', options) .catch(errorResponse => Observable.throw(errorResponse.json())) .map((response) => { if (response instanceof Response) { return response.blob(); } return response; }) .subscribe(data => saveAs(data, filename), error => console.log(error)); // implement your error handling here }
关键点是responseType: ResponseContentType.Blob上的responseType: ResponseContentType.Blob和获取响应时的response.blob() 。
通常，不build议像这样访问响应的_body属性： response._body ，而应该调用相关的方法来获取基于types的正文内容（比如response.blob() ， response.json()等）
只要input数据是JSON格式，就可以使用json2csv 。 函数的输出将是CSV，可以在Microsoft Excel或Google表格中打开。
安装软件包：
$ npm install json2csv --save
将以下内容添加到您的组件：
var json2csv = require('json2csv'); var fields = ['field1', 'field2', 'field3']; var result = json2csv({ data: myData, fields: fields });