Блог

Ниже приведен код, который я написал, файл Pdf отображается один раз и не отображается один раз (не удалось загрузить pdf). Я также заменил на iFrame, по тому же сценарию. Иногда отображается pdf, иногда нет. Кто-нибудь может мне помочь.

Мой HTML-элемент:

        <embed [src]="pdf.pdfSource | safe" type="application/pdf">
  

Мой Ts-код:

   var blob = new Blob([response.collection], {
        type: 'application/pdf'
      });
      var url = URL.createObjectURL(response);
      self.pdf.pdfSource = url;
  

Я создал безопасный канал, как показано ниже

 import { Component, ViewEncapsulation, ViewChild, ElementRef, PipeTransform, Pipe, OnInit } from '@angular/core';
   import { DomSanitizer } from "@angular/platform-browser";

   @Pipe({ name: 'safe' })
       export class SafePipe implements PipeTransform {
          constructor(private sanitizer: DomSanitizer) { }
            transform(url) {        
              return this.sanitizer.bypassSecurityTrustResourceUrl(url);
            }
   }
  

Я бы предпочел создать пользовательский компонент для обработки такого требования:

Создайте объект-embed component и передайте исходный URL и введите его в качестве input атрибутов. Это будет обновляться каждый раз, когда происходит изменение входных значений для компонента.

Пример:

 import { Component, Input, OnChanges, OnInit, ChangeDetectionStrategy } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Component({
    selector: 'object-embed',
    template: `<div [innerHTML]="safeHtml"></div>`,
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class ObjectEmbedComponent implements OnChanges {
    @Input() srcUrl: string;
    @Input() embedType: string;
    public safeHtml: SafeHtml;

    ngOnChanges() {

       let html = '';
       if(this.embedType ==='application/pdf'){
           html = '<embed src="${this.srcUrl} type="${this.embedType}">'
       }
       this.safeHtml = this.getSafeHtml(html);
   }


     getSafeHtml(html: string) {
        return this.sanitizer.bypassSecurityTrustHtml(html);
     }

}
  

И используйте этот компонент:

 <object-embed [embedType]="pdf" [srcUrl]="document-url-here"/>
  

Теперь эти значения можно передавать с использованием объекта / переменной, определенной в родительском компоненте, или напрямую. если у вас есть объект docDetails с этими значениями, вы можете использовать его следующим образом (при условии, что у него есть свойства docType и docUrl :

 <object-embed [embedType]="docDetails.docType" [srcUrl]="docDetails.docUrl"/>