如何在没有外部软件包的情况下在浏览器中本地下载图像

Question

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

我在网上搜索了两个选项：

使用display: none创建一个锚元素并动态地将url添加到href。但后来我必须使用DOMSanitizer与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);

并完成它。为什么这么难？是否存在安全问题？我真的不明白。

Answer 1

经过很多努力，我至少对我发现了这个问题。我使用的是广告拦截器插件（uBlock origin），它显然会阻止blob网址。事实上，似乎所有广告拦截器都默认执行此操作。在我的localhost（或您部署到的任何网站）上禁用广告拦截器为我解决了这个问题。

你可以在这里阅读更多相关信息：Why Do Ad Blockers Block Blobs?