先說兩個比較古老的js下載方式，

1. window.open(src)和window.location = src

2. form表單提交

這兩個方式都有侷限性，對於需要傳遞大量引數的下載請求，可以這樣寫：

this.http.post(`${this.uri}/exportdata.file`, params, {responseType: 'blob'}).subscribe(data => {
  const link = document.createElement('a');
  const blob = new Blob([data], {type: 'application/zip'});
  link.setAttribute('href', window.URL.createObjectURL(blob));
  link.setAttribute('download', new Date().getTime() + '.zip');
  link.style.visibility = 'hidden';
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
})
 

這裡通過設定 responseType: 'blob' 獲取了檔案的二進位制流，再通過a標籤的方式模擬點選下載。

這種下載方式有兩點需要注意：

1. 下載的檔案格式需要確定

上面的例子下載的是zip格式，如果是其他格式，需要改變Content-Type（程式碼第三行） 以及 檔名字尾（第五行）。比如：

 'doc'        => 'application/msword',

 'xls'        => 'application/vnd.ms-excel',

2. 檔名是前端命名還是後端命名

前端命名的話上面的程式碼就可以了，如果需要後端命名，首先需要後端在響應頭中帶上檔名，比如：

Content-disposition: attachment; filename=file_201807201030327711.zip

再對上面的post請求做一下修改：

this.http.post(`${this.uri}/exportdata.file`, params, {responseType: 'blob', observe: 'response'}).subscribe(data => {
  const link = document.createElement('a');
  const blob = new Blob([data.body], {type: 'application/zip'});
  link.setAttribute('href', window.URL.createObjectURL(blob));
  link.setAttribute('download', data.headers.get('Content-disposition').split('filename=')[1]);
  link.style.visibility = 'hidden';
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
})
 

通過設定 observe: 'response' 獲取到返回的響應頭，再獲取其中的檔名。