Angular 14中如何检测PDF <embed>元素的404加载错误

元素的error事件存在局限性：它仅在无法加载嵌入的插件本身（比如浏览器没有PDF阅读器插件）时触发，而当插件能正常加载但目标PDF资源返回404等错误时，该事件不会被触发。以下是两种可行的解决方案：

方案一：提前通过HTTP请求校验资源状态 #

在将PDF地址赋值给的src之前，先用Angular的HttpClient请求资源的状态，提前判断资源是否可用。

组件代码示例 #

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-pdf-viewer',
  templateUrl: './pdf-viewer.component.html'
})
export class PdfViewerComponent {
  src?: string;
  pdfError = false;

  constructor(private http: HttpClient) {}

  setPdfSource(pdfUrl: string) {
    this.pdfError = false;
    // 用HEAD请求校验资源状态，比GET更轻量
    this.http.head(pdfUrl, { observe: 'response' }).subscribe({
      next: (response) => {
        if (response.status === 200) {
          this.src = pdfUrl;
        } else {
          this.handlePdfLoadFailure();
        }
      },
      error: () => {
        this.handlePdfLoadFailure();
      }
    });
  }

  private handlePdfLoadFailure() {
    this.pdfError = true;
    console.log('PDF资源不可用');
    // 这里可以添加错误提示UI、替换默认占位内容等逻辑
  }

  loaded(event: UIEvent) {
    console.log('PDF加载完成', event);
  }
}

模板代码示例 #

<ng-container *ngIf="!pdfError; else errorTemplate">
  <embed
    #embed
    [src]="src"
    (load)="loaded($event)"
  />
</ng-container>

<ng-template #errorTemplate>
  <div>PDF加载失败，请检查资源链接</div>
</ng-template>

方案二：结合readyState与超时定时器兜底 #

如果无法提前校验资源，可通过监听的readyState属性，配合超时定时器判断是否加载失败。

组件代码示例 #

import { Component, ViewChild, ElementRef, OnInit } from '@angular/core';

@Component({
  selector: 'app-pdf-viewer',
  templateUrl: './pdf-viewer.component.html'
})
export class PdfViewerComponent implements OnInit {
  src = '你的PDF地址';
  @ViewChild('embed') embedRef!: ElementRef<HTMLEmbedElement>;
  private loadTimeoutId?: number;

  ngOnInit() {
    this.startLoadTimeoutCheck();
  }

  private startLoadTimeoutCheck() {
    // 设置5秒超时，可根据实际网络情况调整
    this.loadTimeoutId = window.setTimeout(() => {
      const embedElement = this.embedRef.nativeElement;
      if (embedElement.readyState !== 'complete') {
        this.handlePdfLoadFailure();
      }
    }, 5000);
  }

  loaded(event: UIEvent) {
    console.log('PDF加载完成', event);
    // 加载成功后清除超时定时器
    if (this.loadTimeoutId) {
      clearTimeout(this.loadTimeoutId);
    }
  }

  private handlePdfLoadFailure() {
    console.log('PDF加载超时或失败');
    // 处理错误逻辑
  }
}

模板代码示例 #

<embed
  #embed
  [src]="src"
  (load)="loaded($event)"
/>

内容的提问来源于stack exchange，提问作者caitlin