如何从 Angular 中的 url 下载图像？

Question

我有一个下载按钮，我想在其中触发所选封面图像的下载。当我的图片是字节数组时，这非常有效，但如果它是网址，则下载不起作用。它只是打开一个新页面，图像位于中心。我已经寻找答案有一段时间了，但我发现没有任何效果。如何仅从网址下载图像？

          <a #downloadLink [href]="image"
             [download]="'CoverImage' + '.jpg'"></a>
          <button (click)="downloadLink.click()">
             Download  
          </button>

Answer 1

要使图像可从 URL 下载，请将其转换为数据 URL 并将其设置为锚元素的

href

属性。这有助于浏览器将图像视为可下载文件。在 Angular 中，你可以这样做：

import { DomSanitizer, SafeUrl } from '@angular/platform-browser';

export class YourComponent {
  image: string; 

  constructor(private sanitizer: DomSanitizer) {
    this.image = 'https://example.com/your-image.jpg';
  }

  getDownloadUrl(): SafeUrl {
    const dataUrl = 'data:image/jpeg;base64,'; 
    return this.sanitizer.bypassSecurityTrustUrl(dataUrl + this.image);
  }
}

在您的模板中：

<a #downloadLink [href]="getDownloadUrl()"
   [download]="'CoverImage' + '.jpg'"></a>
<button (click)="downloadLink.click()">
   Download  
</button>