Question

在浏览器中获取图像的唯一方法是在新窗口中打开它。但是我希望浏览器下载它。我迁移到了新的HttpClient，但现在看来我做不到。

我已经在线搜索过，两个选项是：

使用display: none制作锚元素，然后将网址动态添加到href中。但是然后我必须将DOMSanitizer与bypassSecurityTrustUrl()一起使用，这存在安全风险，所以我不能使用它。

OR

使用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起源），显然可以阻止Blob URL。实际上，似乎所有广告拦截器默认都是这样做的。在我的本地主机（或您部署到的任何网站）上禁用广告拦截器，为我解决了这个问题。

您可以在此处了解更多信息： Why Do Ad Blockers Block Blobs?

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

1 个答案: