Javascript 文件不是作为文件名下载的，而是按“文件”键下载的

当我点击文件名时，它将成功下载文件（d7f1eb91-6a65-4fde-8151-d9fb6afb7cfb_Desert.jpg）。但我希望下载的是Desert.jpg。你能帮我找出这个问题吗

Html:

fileName=this.split下划线（linkSource）
console.log（文件名）
//Desert.jpg
如果（文件名）
setAttribute（'download'，fileName）；
document.body.appendChild（下载链接）；
downloadLink.click（）；
document.body.removeChild（下载链接）；
}
拆分下划线（数据）{
返回数据。拆分（“”“）[1]；
}
removeImage（）{
this.removebtn=false；
//console.log（this.removebtn）；
this.employeeDetails.certificateurl=“”；
this.employeeDetails.showcertificateurl=“”；
}

不幸的是，这是浏览器的安全功能，并且（我假设）如果目标是跨原点的，Edge会忽略download属性

我能想到的唯一解决方案是：

将源对象重命名为所需的文件名

添加中间服务器以使用所需文件名代理文件

使用Ajax下载图像，然后以如下方式内联提供：

fetch（'https://'）。然后（（blob）=>{
常量ele=document.createElement（'a'）；
ele.href='data:image/jpeg'，+encodeURI（blob）；
ele.target='u new'；
ele.download='desert.jpg'；
ele.click（）；
});

---

确保您的S3 bucket的CORS策略已列出您的域。

能否在每个

控制台.log

之后添加注释行，以查看结果输出？@Random，我已添加了控制台.log行，您现在可以查看。

    <p *ngIf="removebtn" (click)="showPdf(employeeDetails.certificateurl)" class="wordBreak"><a style="cursor: pointer;" target="_blank">{{(employeeDetails.showcertificateurl)}}</a> 
       <i class="fa fa-times" style="color:red; cursor: pointer;font-size: 20px; margin-left: 10px;" aria-hidden="true" (click)="removeImage()">
       </i>
    </p>

showPdf(file) {
    console.log(file)
      //https://testkimage.s3.us-east-2.amazonaws.com/upload/image/d7f1eb91-6a65-4fde-8151-d9fb6afb7cfb_Desert.jpg
      const linkSource = file;
      const downloadLink = document.createElement("a");
      let fileName = "";
      downloadLink.href = linkSource;
      console.log(downloadLink)
      //<a href="https://testkimagek.s3.us-east-2.amazonaws.com/upload/image/d7f1eb91-6a65-4fde-8151-d9fb6afb7cfb_Desert.jpg" download="Desert.jpg"></a>
      fileName = this.splitunderscore(linkSource)
      console.log(fileName)
      //Desert.jpg
      if (fileName)
           downloadLink.setAttribute('download', fileName);
      document.body.appendChild(downloadLink);
      downloadLink.click();
      document.body.removeChild(downloadLink);
    }

splitunderscore(data){
  return data.split('_')[1];
}
 removeImage(){
    this.removebtn = false;
    // console.log(this.removebtn);
    this.employeeDetails.certificateurl = "";
    this.employeeDetails.showcertificateurl = "";
  }

fetch('https://<ImageURL>').then((blob) => {
  const ele = document.createElement('a');
  ele.href = 'data:image/jpeg,' + encodeURI(blob);
  ele.target = '_new';
  ele.download = 'desert.jpg';
  ele.click();
});