Как просмотреть загруженный файл любого типа в angular?

Question

HTML:

     <mat-list-item role="listitem" *ngFor="let item of uploadedFiles">
            <div class="list-files">
            <span><a class="showlink"(click)="downloadFile(item.certificate_name,item.uploaded_doc_name)">{{item.uploaded_doc_name}}</a></span>
          <!-- <span>{{item.certificate_name | spliter}}</span> -->
            <span>{{item.expiry_date}}</span>
             <div class="btn-custom" (click)="delete(item)">Remove</div>
            </div>
     </mat-list-item>

component.ts: (Вот мой код для загрузки файла ... Он загружает только текстовый файл ... но мне нужно скачать, какой у меня есть файл загрузил, что я должен скачать здесь .. Затем перед загрузкой файл должен просмотреть в новой вкладке .. не могли бы вы помочь мне сделать это?)

downloadFile(file_id, filename){
   const payload ={
    "company_id":this.data.company_id,
    "module_name": "Agent",
    "file_id":file_id
   }
   this.downloadFileError.unsubscribe()
   this.downloadFileSuccess.unsubscribe()
   this.store.dispatch(new DownloadFile(payload))
  this.downloadFileSuccess = this.store.pipe(select(getDownloadFileSuccess)).subscribe(result => {
     if(!!result){
      let dataType = result.type;
      let binaryData = [];
      binaryData.push(result.data);
      let downloadLink = document.createElement('a');
      downloadLink.href = window.URL.createObjectURL(new Blob(binaryData, {type: dataType}));
      if(filename){
        downloadLink.setAttribute('download', filename);
      }
      document.body.appendChild(downloadLink);
      downloadLink.click();
      downloadLink.parentNode.removeChild(downloadLink);
  this.store.dispatch(new GetDownloadFileSuccess(null))
     }
   })
  this.downloadFileError =  this.store.pipe(select(getDownloadFileError)).subscribe(result => {
    if(!!result){
      console.log(result)
    }
  })
 }

Answer 1

Мой ответ был буфер массива, который я преобразовал в двоичный файл для загрузки и предварительного просмотра. Я создал 2 иконки в своем html, один для загрузки и один для предварительного просмотра. Когда я нажимаю кнопку загрузки, я вызываю эту функцию, и для предварительного просмотра я использовал SafeUrl внутри iframe. Я думаю, это будет более понятно для вас.

arrayBufferToBase64(buffer, type, fileName) {
    let binary = '';
    const bytes = new Uint8Array(buffer);
    const len = bytes.byteLength;
    for (let i = 0; i < len; i++) {
      binary += String.fromCharCode(bytes[i]);
    }
    const file = window.btoa(binary);
    const mimType = type === 'pdf' ? 'application/pdf' : type === 'xlsx' ? 'application/xlsx' : type === 'pptx' ? 'application/pptx' : type === 'csv' ? 'application/csv' : type === 'docx' ? 'application/docx' : type === 'jpg' ? 'application/jpg' : type === 'png' ? 'application/png' : '';

    const url = `data:${mimType};base64,` + file;
   this.SafeUrl = this.sanitizer.bypassSecurityTrustResourceUrl(url);
      const a = document.createElement('a');
      a.href = url;
      a.download = fileName;
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
      window.URL.revokeObjectURL(url);

Answer 2

передать тип также в функцию и обновить расширение в типе;

например:

   downloadLink.href = window.URL.createObjectURL(new Blob(binaryData, {type: 'application/pdf'}))

использовать это, чтобы получить расширение загруженного файла

  fileType = filename.substr(filename.lastIndexOf('.') + 1); 

для просмотра документа необходимо конвертировать в safeUrl

var url = window.URL.createObjectURL(new Blob(binaryData, {type: dataType}));
 safefileUrl = this.sanitizer.bypassSecurityTrustResourceUrl(url);