在Angular 4中下载图像

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [
    HttpClientModule
  ],
  ...
})
export class AppModule { }

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-image',
  templateUrl: './image.component.html',
  styleUrls: ['./image.component.css']
})
export class ImageComponent implements OnInit {

  constructor(private http: HttpClient) { }

  ngOnInit() {
  }

  downloadImage() {
    const imageUrl = 'https://example.com/image.jpg'; // 替换为实际的图像URL
    this.http.get(imageUrl, { responseType: 'blob' }).subscribe((response: Blob) => {
      const url = window.URL.createObjectURL(response);
      const a = document.createElement('a');
      a.href = url;
      a.download = 'image.jpg'; // 下载的文件名
      a.click();
      window.URL.revokeObjectURL(url);
      a.remove();
    });
  }

}

<button (click)="downloadImage()">下载图像</button>