Angular中如何通过URL下载图片？

原代码直接用外部URL作为a标签href并设置download属性时，会因浏览器同源策略限制失效，只会打开图片而不触发下载。要实现URL图片的下载，需先将图片资源转为Blob对象，再生成可本地下载的临时URL，具体实现如下：

步骤1：在Angular组件类中添加下载逻辑 #

import { Component } from '@angular/core';

@Component({
  selector: 'app-image-download',
  templateUrl: './image-download.component.html',
  styleUrls: ['./image-download.component.css']
})
export class ImageDownloadComponent {
  // 目标图片URL
  imageUrl = 'https://example.com/your-cover-image.jpg';

  async downloadImage(url: string) {
    try {
      // 获取图片资源并转为Blob格式
      const response = await fetch(url);
      const blob = await response.blob();
      // 生成临时可访问的Blob URL
      const blobUrl = URL.createObjectURL(blob);
      
      // 创建隐藏a标签触发下载
      const downloadLink = document.createElement('a');
      downloadLink.href = blobUrl;
      downloadLink.download = 'CoverImage.jpg'; // 自定义下载文件名
      document.body.appendChild(downloadLink);
      downloadLink.click();
      
      // 清理临时资源
      document.body.removeChild(downloadLink);
      URL.revokeObjectURL(blobUrl);
    } catch (error) {
      console.error('下载失败:', error);
      // 可根据需求添加用户提示，比如弹窗告知下载出错
    }
  }
}

步骤2：修改模板代码 #

去掉原隐藏a标签，直接让按钮调用组件内的下载方法：

<button (click)="downloadImage(imageUrl)">
  Download
</button>

注意事项 #

• 如果图片所在服务器未配置CORS（跨域资源共享），fetch请求会失败，此时需要通过后端代理转发图片请求，绕过跨域限制。
• 下载文件名可根据实际需求动态调整，比如从URL提取原文件名，或结合业务场景自定义。

内容的提问来源于stack exchange，提问作者Anett Barát