如何在Angular 4中下载Excel/Zip文件 [英] How to download excel/Zip files in Angular 4
问题描述
我将角4用作叶状端,将内腔5.4用作后端.
I am using angular 4 as frond end and lumen 5.4 as back end.
我的要求是将一些数据导出为excel和zip文件.
My requirement is to export some data as excel and zip file.
使用从'file-saver/FileSaver';
包中导入的{ saveAs }
进行文件下载.
Using import { saveAs }
from 'file-saver/FileSaver';
package for file download.
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);
}
}
流明代码
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 M Y H: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');
似乎总是空的. - 我们无法打开下载的文件,显示损坏的消息.
- 可用于文本文件下载
const contentDispositionHeader: string = response.headers.get('Content-Disposition');
seems always empty.- We cant open downloaded file, shows corrupted message.
- It working for text file download
请帮助我解决此问题.或为angular指定其他任何工作代码//程序包
Please help me to resolve this issue. OR specify any other working code//package for 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
}
关键点是RequestOptions上的responseType: ResponseContentType.Blob
和获取响应时的response.blob()
.
The key points are responseType: ResponseContentType.Blob
on the RequestOptions and response.blob()
when getting back the response.
通常,不建议像这样访问响应的_body
属性:response._body
,而是应该调用相关方法来根据其类型获取主体内容(例如response.blob()
,response.json()
等)
In general, it's not recommended to access the _body
property of the response like this: response._body
, but instead you should call the relevant method to get the body content based on its type (like response.blob()
, response.json()
, etc)
这篇关于如何在Angular 4中下载Excel/Zip文件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!