使用浏览器实现下载的几种方式_iframe下载文件

方式一：使用 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博客