Javascript 如何使附件可下载-角度

我有一个场景，用户可以上传文件（PDF/PNG），并显示是否已经上传了任何文件。我能够做上传部分，并向用户显示任何文件已经上传。现在，我希望用户可以下载，如果有任何上传的文件上点击附件存在。你们能给点建议吗

ts文件

upload() {
    const fileUpload = this.fileUpload.nativeElement; //* retrieve native DOM element wrapped by ElementRef
    fileUpload.onchange = () => {
      const file = fileUpload.files[0]; // retrieve file
      if (file) {
        const filesize = getFileSizeHelper(file.size); // get file size
        if (filesize <= 2) {
          this.filename = file.name;
          this.uploadFile(file);
        } else {
          this.fileSizeEr.emit(true);
        }
      }
    };
    fileUpload.click(); // open file picker window
  }

  /**
   * method to upload file
   */
  uploadFile(file: any) {
    const formData = new FormData();
    formData.append('file', file, file.name);
    this.myservice.uploadFile(formData).subscribe((res: any) => {
      this.uploadedFile = res;
      this.fileUploadRes.emit(res); //emit response object to parent component
    });
  }

<div class="upload-space" (click)="upload()">
  <mat-icon *ngIf="!doc?.fileName">publish</mat-icon>
  <span *ngIf="!doc?.fileName">
    {{ "PNG and PDF files allowed(max.2MB)" | translate }}
  </span>
  <span *ngIf="doc?.fileName">
    {{ doc.fileName }}
  </span>
  <!-- <span *ngIf="filename">
    {{ filename }}
  </span>-->
  <input
    type="file"
    #fileUpload
    id=""
    name="fileUpload"
    accept="image/*,application/pdf"
    style="display:none;"
  />
</div>

upload（）{
const fileUpload=this.fileUpload.nativeElement；//*检索由ElementRef包装的本机DOM元素
fileUpload.onchange=（）=>{
const file=fileUpload.files[0]；//检索文件
如果（文件）{
const filesize=getfilesizehelp（file.size）；//获取文件大小
如果（文件大小）{
this.uploadedFile=res；
this.fileUploadRes.emit（res）；//将响应对象发送到父组件
});
}

HTML文件

upload() {
    const fileUpload = this.fileUpload.nativeElement; //* retrieve native DOM element wrapped by ElementRef
    fileUpload.onchange = () => {
      const file = fileUpload.files[0]; // retrieve file
      if (file) {
        const filesize = getFileSizeHelper(file.size); // get file size
        if (filesize <= 2) {
          this.filename = file.name;
          this.uploadFile(file);
        } else {
          this.fileSizeEr.emit(true);
        }
      }
    };
    fileUpload.click(); // open file picker window
  }

  /**
   * method to upload file
   */
  uploadFile(file: any) {
    const formData = new FormData();
    formData.append('file', file, file.name);
    this.myservice.uploadFile(formData).subscribe((res: any) => {
      this.uploadedFile = res;
      this.fileUploadRes.emit(res); //emit response object to parent component
    });
  }

<div class="upload-space" (click)="upload()">
  <mat-icon *ngIf="!doc?.fileName">publish</mat-icon>
  <span *ngIf="!doc?.fileName">
    {{ "PNG and PDF files allowed(max.2MB)" | translate }}
  </span>
  <span *ngIf="doc?.fileName">
    {{ doc.fileName }}
  </span>
  <!-- <span *ngIf="filename">
    {{ filename }}
  </span>-->
  <input
    type="file"
    #fileUpload
    id=""
    name="fileUpload"
    accept="image/*,application/pdf"
    style="display:none;"
  />
</div>

出版
{{“允许使用PNG和PDF文件（最大2MB）”|翻译}
{{doc.fileName}

我假设您使用的是blob，因此在创建链接后，无论是否使用class=“button”，您都只需将（单击）事件上的函数与一些标识属性绑定，然后从服务器获取它，然后告诉您的httpget响应类型为blob

使用角度httpclient时，如下所示：

//injected httpService from angular
this.httpClient.get('your controller', { responseType: blob}).subscribe( response => {
        const a = document.createElement('a'); // get the element
        const objectUrl = URL.createObjectURL(response); //create objecturl
        a.href = objectUrl; //make the <a></a> link's href to this object url
        a.download = 'any name you want to add'; 
        a.click(); //imitate a click on it
        //THE FOLLOWING STATEMENT IS ONLY FOR BE ABLE TO DOWNLOAD IT IN MS EDGE
        if (window.navigator && window.navigator.msSaveOrOpenBlob) {
          window.navigator.msSaveOrOpenBlob(response, 'any name you want to add' + ".pdf");
        }
        URL.revokeObjectURL(objectUrl);
})

//从angular注入的httpService
this.httpClient.get（'your controller'，{responseType:blob}）.subscribe（response=>{
const a=document.createElement（'a'）；//获取元素
const objectUrl=URL.createObjectURL（响应）；//创建objectUrl
a、 href=objectUrl；//将链接的href设置为此对象url
a、 下载='您要添加的任何名称'；
a、 click（）；//模仿一下它
//以下语句仅适用于您能够在MS EDGE中下载它
if（window.navigator&&window.navigator.msSaveOrOpenBlob）{
window.navigator.msSaveOrOpenBlob（响应“任何要添加的名称”+”.pdf）；
}
revokeObjectURL（objectUrl）；
})

我认为这不是一个完美的解决方案，但对我来说很有效