如何使用新的HttpClient下载文件？

Question

所以它过去是如何工作的，就是我做了一个'GET'并提供了ID和返回的数据，我只需要这样做：

const subscription = this.downloadService.downloadFile(id, this.file.folderId).subscribe(data => {
    window.location.href = data.url;
    subscription.unsubscribe();
});

Chrome会自动下载文件并保留在网站上。

现在我这样做：

const subscription = this.downloadFile(id, folderId).subscribe(data => {
    const blob = new Blob([data], { type: 'image' });
    const blobUrl = window.URL.createObjectURL(blob);
    window.location.href = blobUrl;
    subscription.unsubscribe();  
});

Chrome也开始下载，但始终是同一文件，在控制台中如下所示：

我尝试将其转换为文件，但是'window.location.href'需要一个URL，当我将其转换为这样的文件时我没有该URL：

const file = new File([blob], name, { lastModified: Date.now(), type: 'image' })

我需要处理这些数据以确保将其下载为图像（总是尝试下载的图像）？

编辑：显然我的httpParams实现错误！这是错误的方式：

const httpParams = new HttpParams();
httpParams.append('action', 'downloadFile');
httpParams.append('fileIds', id.toString());
httpParams.append('currentLibraryFolderId', folderId.toString());

仅传递了一个空的httpParams。这是正确的方法：

const params = new HttpParams()
    .set('action', 'downloadFile')
    .set('fileIds', id.toString())
    .set('currentLibraryFolderId', folderId.toString());

Answer 1

尝试使用window.open(url)：

  

如果类型受image或pdf等浏览器的支持，它将   打开，否则下载。

HTML：

<a (click)="downloadFile(fileData, type)" download>Download File</a>

使用FileSaver下载和保存：

 npm install file-saver --save

 import { saveAs } from 'file-saver/FileSaver';

如果您收到的回复为arraybuffer

var blob = new Blob([data], { type: type});

var url = window.URL.createObjectURL(blob);

saveAs(blob, filename);

var winOpen = window.open(url);


// If Popup blocked
if (!winOpen || winOpen.closed || typeof winOpen.closed == 'undefined') {
       alert( 'Please disable your Pop-up blocker and try again.');
 }