Angular Material Dialog встроенный формат PDF - PullRequest
Новая
       137

Angular Material Dialog встроенный формат PDF

0 голосов
/ 19 марта 2020

Я пытаюсь показать PDF в диалоге материалов, но продолжаю бороться с макетом. Независимо от того, что я пытаюсь сделать, мой диалог слишком мал, чтобы показать PDF, или он огромный и не в центре.

pdf too big

pdf too small

Ниже приведен мой текущий код, я бы хотел стилизовать диалоги pdf и Material так, чтобы его высота составляла около 90% высоты просмотра, а ширина охватывала ширину PDF. Когда я устанавливаю ширину на 90% и высоту на 90% для целей тестирования, она полностью смещена от центра, и я не могу отцентрировать ее.

Функция диалога 

  openPdfInBrowser() {
    this.downloadService.getPdffromResult(this.result.resultid).subscribe(x => {
      console.log(x);
      let fileURL = URL.createObjectURL(x);
      const dialogRef = this.dialog.open(PdfDialogComponent, {
        data: fileURL,
        height: ...,
        width: ...
      });
      dialogRef.afterClosed().subscribe();
    });
  }

HTML

<div>
  <iframe [src]="url" type="application/pdf"></iframe>
</div>

TS 

export class PdfDialogComponent implements OnInit {
  url;

  constructor(
    public dialogRef: MatDialogRef<PdfDialogComponent>,
    @Inject(MAT_DIALOG_DATA) public pdfUrl: string, private domSanitizer: DomSanitizer
  ) {
    this.url = this.domSanitizer.bypassSecurityTrustResourceUrl(pdfUrl);
  }

  ngOnInit() {}
}
...