方式一:使用 a 标签实现下载
component.js
downLoadFile(item: LogList) {
this.exportTipId = this.msgSrv.success('导出成功', { nzDuration: 1200 }).messageId;
const url = `${window.location.protocol}//${window.location.hostname}:${window.location.port}${window.location.pathname}${this.settings.app.SERVER_URL}/watson/bs/asyncExportDownload?attachmentId=${item.attachmentId}&groupId=${item.leId}`;
downloadFile(url, item.comments);
this.matomoTracker.trackEvent('流水文件', 'Downloaded', item.comments);
}
/* 下载文件
*/
export function downloadFile(url, fileName = '') {
let eleLink = document.createElement('a');
if (fileName) {
eleLink.download = fileName;
}
eleLink.style.display = 'none';
eleLink.href = url;
// 受浏览器安全策略的因素,动态创建的元素必须添加到浏览器后才能实施点击
document.body.appendChild(eleLink);
// 触发点击
eleLink.click();
// 然后移除
document.body.removeChild(eleLink);
}
方式二:使用 iframe 标签实现下载
downLoadFile(item: LogList) {
this.exportTipId = this.msgSrv.loading('正在导出流水', { nzDuration: 0 }).messageId;
const params = { attachmentId: item.attachmentId, groupId: item.leId };
const url = `${this.settings.app.SERVER_URL}/watson/bs/asyncExportDownload?${queryToString(params)}`;
downloadFile(url, item.comments).then(res => {
this.msgSrv.remove(this.exportTipId);
this.msgSrv.success('导出成功', { nzDuration: 1200 });
this.matomoTracker.trackEvent('流水文件', 'Downloaded', item.comments);
});
}
utils.js
// 下载方法
export function downloadFile(urlValue: string, fileName = '') {
const url = `${window.location.protocol}//${window.location.hostname}:${window.location.port}${window.location.pathname}${urlValue}`;
let iframe = document.createElement('iframe');
iframe.src = url;
iframe.style.display = 'none';
iframe.name = fileName;
document.body.appendChild(iframe);
return new Promise((resolve, reject) => {
const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
if (iframeDoc.readyState === 'complete' || iframeDoc.readyState === 'interactive') {
resolve(true);
}
});
}
// 处理get请求的字段拼接方法 ?page=xxx&pageSize=xxx
export function queryToString(query = {}) {
const encode = encodeURIComponent;
return Object.keys(query)
.map(key => `${encode(key)}=${encode(query[key])}`)
.join('&');
}
iframe下载参考连接:https://www.jianshu.com/p/ac542c8f3775
方式三:使用http调用后端接口,后端返回头中增加字段 Content-Length,然后接口返回的下载参数与 Content-Length 进行百分比换算来显示下载进度。
component.ts
this.service.exportDownload(params).subscribe(data => {
// progress
if (data.type === HttpEventType.DownloadProgress) {
// loaded已经下载完/total下载总数 也就是后端返回的Content-Length
this.downloadPercent = data.loaded / data.total;
}
// finished
if (data.type === HttpEventType.Response) {
this.fileSaver.save(data.body, item.comments);
this.msgSrv.remove(this.exportTipId);
this.msgSrv.success('导出成功', { nzDuration: 1200 });
this.matomoTracker.trackEvent('流水文件', 'Downloaded', item.comments);
this.isDownloadId = null;
}
});
service.js
// 导出流水
exportDownload(params: ExportParams): Observable<any> {
return this.http
.get(`/watson/bs/asyncExportDownload`, params, {
responseType: 'blob',
reportProgress: true, // 打开返回进度的显示
observe: 'events', // 来查看所有事件,包括传输的进度。
headers: new HttpHeaders({ 'Content-Type': 'application/json' })
})
.pipe(map(data => data));
}
参考连接:
angular使用post下载流文件:Angular使用HTTP POST下载流文件_GuoyeZhang的博客-CSDN博客