我有一个下载按钮，我想触发下载所选的封面图片.当我的图片是一个字节数组时，这很好用，但是如果它是一个url，那么下载就不起作用了.它只是打开了一个新的页面，图像在中心.我一直在寻找一个答案，但我没有找到工作.如何从URL下载图片？
<a #downloadLink [href]="image"
[download]="'CoverImage' + '.jpg'"></a>
<button (click)="downloadLink.click()">
Download
</button>
要实现通过点击按钮直接从URL下载图像，您需要稍微修改您的方法.您面临的问题是，当锚<a>标记的href属性设置为URL时，浏览器会将其视为要导航到的链接，而不是要下载的文件.这就是它在新页面中打开图像的原因.
要解决这个问题，您需要以编程方式获取图像，创建一个Blob(一个不可变的原始数据的类似文件的对象)，然后触发下载.你可以这样做:
修改您的HTML:保留您的按钮，但您可以删除锚标记.
<button (click)="downloadImage(image)">
Download
</button>
在您的组件中添加一个下载函数:该函数将处理下载逻辑.
import { HttpClient } from '@angular/common/http';
...
constructor(private http: HttpClient) { }
downloadImage(url: string) {
this.http.get(url, { responseType: 'blob' }).subscribe(blob => {
// Create a link element
const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = 'CoverImage.jpg'; // Set the download filename
// Append link to the body, click it, and then remove it
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}, error => {
console.error('Error downloading the image: ', error);
});
}
在此函数中，FETCH用于从URL检索图像.然后，它将响应转换为Blob.我们在内存中创建一个锚点<a>元素，将其href属性设置为表示Blob的URL，并将Download属性设置为所需的文件名.然后，我们以编程方式单击该链接以触发下载，最后从文档中删除该链接.
这种方法应该适用于在大多数现代浏览器中从URL下载图像.请记住，如果您的应用程序托管在不同的域上，则托管镜像的服务器的CORS(跨域资源共享)策略会影响您获取镜像的能力.