我想改用新的HttpClient。到目前为止,我处理以下文件下载:
getXlsx (): Observable<any> {
return this.http.get('api/xlsx', {
responseType: ResponseContentType.ArrayBuffer, // set as ArrayBuffer instead of Json
})
.map(res => downloadFile(res, 'application/xlsx', 'export.xlsx'))
.catch(err => handleError(err));
}
export function downloadFile(data: any, type: string, filename: string): string {
const blob = new Blob([data._body], { type });
const url = window.URL.createObjectURL(blob);
// 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();
return url;
}
将 respondeType 更改为"arraybuffer"将导致空文件。有什么想法如何解决吗?
所以马丁解决了我的问题:
getXlsx (): Observable<any> {
return this.http.get('api/xlsx', {
responseType: 'blob' // <-- changed to blob
})
.map(res => downloadFile(res, 'application/xlsx', 'export.xlsx'))
.catch(err => handleError(err));
}
export function downloadFile(blob: any, type: string, filename: string): string {
const url = window.URL.createObjectURL(blob); // <-- 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();
return url;
}
上述方法有效并且是可接受的解决方案,但是似乎只是将锚标记添加到 DOM 并在您可以以更干净的方式进行时假装单击的代码气味。我们最近遇到了类似的问题,从我们使用FileSaver(https://www.npmjs.com/package/file-saver)的Angular 5网站下载文档。
使用 npm install file-saver
添加 FileSaver 并执行相关导入,您可以使用以下代码下载文件:
getDocument(document: Document) {
let headers = new HttpHeaders(); // additional headers in here
return this._http.get(url, {
headers: headers,
responseType: "blob" // this line being the important part from the previous answer (thanks for that BTW Martin)
}).map(
res => {
var x = res;
if (res) {
let filename = documentName;
saveAs(x, filename);
}
return true;
},
err => {
return true;
}
);
}
这会使用本机 saveAs
命令(如果存在),如果不存在,则实现一些其他逻辑来复制功能。
这可能会在引擎盖下做类似的事情(我真的不知道,因为没有更改),但它将其划分为一个易于使用的第三方包,我希望该包能够得到维护(手指交叉),而无需我更新功能以满足不同包/浏览器的新版本。