Как скачать изображение в угловом формате с помощью node.js?

Question

Здесь у меня есть одно изображение, и я нажимаю на это изображение. Это открывает меню. В меню один вариант загрузки, нажмите на кнопку загрузки. Я хочу загрузить это изображение, как это возможно?(imageUrl находится в консоли кода ниже).Когда я нажимаю на кнопку «Загрузить», я хочу открыть «Сохранить как» и загрузить изображение на свой ПК

HTML

<mat-menu #contextMenu="matMenu">
  <ng-template matMenuContent let-item="item">
    <button mat-menu-item (click)="downloadFile(item)">Download</button>
    <button mat-menu-item>Delete</button>
    <button mat-menu-item>Rename</button>
  </ng-template>
</mat-menu>

TS

folderObj : Folder = new Folder();

downloadFile(item) {
 this.folderObj.folderName = `${this.commonUrlObj.commonUrl}/${item.urloffolder}/${item.imageName}`;
 console.log(this.folderObj.folderName); // http://127.0.0.1:3000/122/122/733/15.jpg (this is imageUrl)
}

Answer 1

используя файл-заставку мы можем сделать это, я надеюсь, что этот код полезен

TS

 folderObj : Folder = new Folder();
 constructor(private userService : UserService){}
 import { saveAs} from 'file-saver';

downloadFile(item){
  let index = this.uploadedImagesObj.findIndex( x => x.imageName ===  item.imageName);
  var filename = this.uploadedImagesObj[index].imageName;
  this.userService.downloadFile({'filename': filename,'urloffolder' : item.urloffolder}).subscribe(
    (data) => {
      if(data && data != undefined && data != null){
        saveAs(data,filename);
      }
    }
  )
}

Сервис

import { HttpClient, HttpHeaders } from '@angular/common/http';

downloadFile(file){
  return this.httpClient.post('http://127.0.0.1/downloadFile',file,{
    responseType : 'blob',
    headers : new HttpHeaders().append('content-type','application/json')
  });
}

app.js (node.jsкод)

app.post('/downloadFile',function(req,res,next){
  filepath = path.join(__dirname,'./public/'+req.body.urloffolder+'/'+req.body.filename);
  res.sendFile(filepath);
});

Answer 2

Добавьте путь img к a href и img src и добавьте атрибут download, как в <a href="imagepath" download="downloaded filename">

Оставьте комментарий, если он не работает.

<div class="img-wrap">
    <img  src="imagepath"/>
    <i class="fa fa-download" aria-hidden="true">
        <a href="imagepath" download="downloaded filename"></a>
    </i>
</div>

Answer 3

Вы можете сделать с тегом привязки проверить ниже код

<a download href="{{commonUrlObj.commonUrl}}/{{item.urloffolder}}/{{item.imageName}}">Download</a>