Angular 如何在没有外部软件包的情况下在浏览器中以本机方式下载图像

在浏览器中获取图像的唯一方法是在新窗口中打开图像。但我想让浏览器下载它。我迁移到了新的HttpClient，但现在我似乎无法做到这一点

我在网上搜索过，有两个选项：

使用

display:none

创建锚元素，并将url动态添加到href。但是我必须将domsanizer与

bypassSecurityTrustUrl（）

一起使用，这是一种安全风险，所以我不能使用它

或

使用filesave.js包，但在我们的项目中，我们希望尝试避免使用包，它使用RAM，因此对于大文件，没有选择。FF和edge中不支持Streamsaver.js，因此也没有选项

我以前使用Angular<4的旧HTTP模块这样做，它只需下载它，不需要任何问题：

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

现在我这样做，但它会打开一个新的选项卡，在Chrome中会自动阻止该选项卡：

const sub = this.downloadService.downloadFile(downloadArray, this.folders.id).subscribe(data => {
    const blob = new Blob([data], { type: 'image/png' });
    const blobUrl = window.URL.createObjectURL(blob);
    const winOpen = window.open(blobUrl);
    sub.unsubscribe();

}, error => {
    console.log(error);
});

所以我只想做这样的事情：

window.download(blobUrl);

---

就这样吧。为什么这么难？有安全问题吗？我真的不明白。

经过一番努力，我发现了问题，至少对我来说是这样。我使用了一个广告拦截器插件（uBlock origin），它显然可以阻止blob URL。事实上，似乎所有的广告屏蔽都是默认的。在我的本地主机（或您部署到的任何网站）上禁用广告拦截器为我解决了这个问题

您可以在此处阅读更多信息：

---

您好，我刚刚遇到同样的问题，您找到解决方案了吗？没有，我使用了第一个选项。动态地创建一个锚定标记，并将url附加到iThanks，但我在开发中没有使用adblocker。但我可以想象其他人会发现这个答案非常有用！