如何使用 node.js 以角度下载图像？答案

【问题标题】：How to download image in angular with node.js?如何使用 node.js 以角度下载图像？
【发布时间】：2018-12-12 08:13:45
【问题描述】：

这里我有一个图像，然后单击该图像它会打开菜单，在菜单一个下载选项中，单击下载按钮我想下载这个图像怎么可能？（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>

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)
}

【问题讨论】：

使用 HTML5 下载属性可以轻松完成。
@Sushil 你能帮我简单地回答一下吗，经过这么多搜索我得到了这个答案，它有效，所以我把这个
检查下面的答案。如果不起作用，请发表评论。

标签： javascript angular

【解决方案1】：

使用文件保护程序我们可以做到这一点我希望这段代码有用

 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);
});

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

你可以用锚标记检查下面的代码

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

【讨论】：

它是在同一个选项卡上打开图像而不是下载，但我想打开另存为并在我的 PC 中下载图像
我想我不确定我们是否可以使用程序化，你可以检查这个stackoverflow.com/questions/38981701/…这会有所帮助