html - pdf没有在iFrame中呈现

问题描述

我试图在 iFrame 上显示一个 pdf 文件。从 api 中，我得到了 byte[]。但是当我得到响应时，我试图创建一个 URL，以便在 iFrame 中显示它。但是，我在浏览器控制台中不断收到以下错误，因此它没有在窗口上显示任何内容。

这是我在浏览器控制台中遇到的错误：

以下是我调用api的代码：


public getPdf$(Id: string): Observable<any> {
    let endpoint = this.appConfig.apiEndpoint + '/data/GetPdfContent?Id=' + Id;
    return this.http.get(endpoint, { responseType: 'blob' }).pipe(map((blbResponse: any) => {
            var blobData= new Blob([blbResponse], { type: 'application/pdf'});            
            var pdfURL = URL.createObjectURL(blobData);           
            return pdfURL;
        }
    ));
}

来自 componenet.ts 文件的代码：

cols: any[];
    listInfo : any;
    displaypdf: boolean = false;
    safeURL : SafeResourceUrl; 
  constructor(private dataService :DataServicepublic sanitizer: DomSanitizer) { 
      
  }
  ngOnInit(): void {
      this.dataService.getListInfo$().subscribe(resp=>{
      this.listInfo = resp;
      this.cols = [
            { field: 'listName', header: 'Name' },
            { field: '', header: 'View'}
        ];
    });
  }
  onRowSelect(event){
      this.dataService.getPdf$(event.id).subscribe(resp=>{
      this.pdfData = resp;
      this.safeURL = this.sanitizer.bypassSecurityTrustResourceUrl(this.pdfData);
    });
  }
closeWindow(){
      this.displaypdf = false;
  }

将 Id 传递给上述 onRowSelect 事件并在 iFrame 中显示 pdf 的代码（其中 iFrame 不起作用。不显示 pdf 文件）

<div class="card">
    <h5></h5>
        <p-table [columns]="cols" selectionMode="single" [value]="data">
            <ng-template pTemplate="header" let-columns>
                <tr>
                    <th *ngFor="let col of columns">
                        <span *ngIf="col.header!=='View'">
                            {{col.header}}
                        </span>
                    </th>
                </tr>
            </ng-template>
            <ng-template pTemplate="body" let-rowData let-columns="columns">
                <tr [pSelectableRow]="columns">
                    <td *ngFor="let col of columns">
                        <span *ngIf="col.header==='View'">
                        <button class="usa-button" pButton type="button" icon="pi pi-eye"  style="float: initial"  (click)="onRowSelect(rowData)"></button></span>
                        <span *ngIf="col.header!=='View'">{{rowData[col.field]}}</span>
                    </td>
                </tr>
            </ng-template>
        </p-table>
</div>
    <p-dialog class= "dialogPadding" header="View Pdf Data" [style]="{'width': '60vw'}" (onHide)="closeWindow()">
    <p-accordion>
        <p-accordionTab header="Pdf Data" [selected]="true">
                        <div>
                <iframe width="100%"  height="600px" [src]="safeURL" type="application/pdf"> </iframe>
                        </div>
        </p-accordionTab>
    </p-accordion>
    </p-dialog>

有人可以帮我解决我在哪里做错了吗？pdf 没有加载到窗口上。至少我需要一个解决方案来在不同的窗口而不是 iframe 中显示 pdf 也很好。我需要的是，我想在浏览器中显示 pdf。

标签： html.netangulartypescriptuser-interface

html - pdf没有在iFrame中呈现

问题描述

解决方案

推荐阅读