Angular 4中如何用iframe/Embed在模态框内预览上传文件

嘿，我懂你之前用a.click()打开文件时被浏览器弹窗拦截的烦恼——毕竟浏览器对非用户直接触发的新窗口管控得很严。下面我给你两种在模态框里预览文件的方案，分别用iframe和Embed，都是基于你现有的Angular代码来调整的，上手很简单：

第一步：更新HTML，添加模态框模板 #

首先保留你原有的文件上传和预览按钮，然后新增一个模态框用来展示文件内容（这里假设你用的是ng-bootstrap的模态框，要是用其他库可以对应调整）：

<!-- 原有的文件上传区域 -->
<div class="col-md-6">
  <fieldset class="form-group">
    <label for="exampleInputFile">{{ 'Foto 3x4' | translate }}</label>
    <input type="file" class="form-control-file" id="inputFileFoto" #arquivophoto accept=".pdf,.jpg,.jpeg,.png" (change)="onFileChange($event)">
  </fieldset>
  <button id="view" type="button" class="btn btn" (click)="openPhoto(contentPhoto)">
    <span class="fa fa-eye"></span>
  </button>
</div>

<!-- 新增的预览模态框 -->
<ng-template #contentPhoto let-modal>
  <div class="modal-header">
    <h4 class="modal-title">文件预览</h4>
    <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <!-- 预留的预览容器，后续插入iframe/Embed -->
    <div id="filePreviewContainer"></div>
  </div>
</ng-template>

第二步：调整组件逻辑，处理文件和模态框 #

在你的组件类里，先处理文件选择事件，保存文件的ObjectURL，然后在模态框打开后渲染预览内容，别忘了关闭时释放资源避免内存泄漏：

import { Component, ViewChild, ElementRef } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';

@Component({
  // 你的组件元数据（selector、templateUrl等）
})
export class YourComponent {
  @ViewChild('arquivophoto') fileInput!: ElementRef;
  private fileUrl: string | null = null;

  constructor(private modalService: NgbModal) {}

  // 处理文件选择事件
  onFileChange(event: Event) {
    const input = event.target as HTMLInputElement;
    if (input.files?.[0]) {
      const file = input.files[0];
      // 创建文件的临时URL，用于预览
      this.fileUrl = window.URL.createObjectURL(file);
    }
  }

  // 打开预览模态框
  openPhoto(content: any) {
    if (!this.fileUrl) {
      alert('请先选择要预览的文件哦');
      return;
    }

    const modalRef = this.modalService.open(content, { size: 'lg' });
    // 模态框打开后渲染文件预览
    modalRef.afterOpened().subscribe(() => {
      this.renderFilePreview(this.fileUrl!);
    });

    // 模态框关闭后释放临时URL，防止内存泄漏
    modalRef.closed.subscribe(() => {
      if (this.fileUrl) {
        window.URL.revokeObjectURL(this.fileUrl);
        this.fileUrl = null;
      }
    });
  }
}

方案一：用iframe实现预览 #

在组件类里添加下面的renderFilePreview方法，用iframe来渲染文件：

private renderFilePreview(fileUrl: string) {
  const container = document.getElementById('filePreviewContainer');
  if (!container) return;

  // 清空容器之前的内容
  container.innerHTML = '';

  const iframe = document.createElement('iframe');
  iframe.src = fileUrl;
  iframe.style.width = '100%';
  iframe.style.height = '600px';
  iframe.style.border = 'none';
  // 允许PDF全屏预览（可选）
  iframe.setAttribute('allow', 'fullscreen');

  container.appendChild(iframe);
}

小贴士：iframe对PDF和图片的兼容性都很棒，现代浏览器大多内置了PDF阅读器，不需要额外插件就能预览。

方案二：用Embed实现预览 #

如果你更喜欢用Embed，把renderFilePreview改成下面的版本，记得要设置正确的文件MIME类型：

private renderFilePreview(fileUrl: string) {
  const container = document.getElementById('filePreviewContainer');
  if (!container) return;

  container.innerHTML = '';

  const embed = document.createElement('embed');
  embed.src = fileUrl;
  embed.type = this.getFileType(fileUrl); // 设置对应文件的MIME类型
  embed.style.width = '100%';
  embed.style.height = '600px';
  embed.style.border = 'none';

  container.appendChild(embed);
}

// 辅助方法：根据文件后缀获取MIME类型
private getFileType(fileUrl: string): string {
  const ext = fileUrl.split('.').pop()?.toLowerCase();
  switch (ext) {
    case 'pdf':
      return 'application/pdf';
    case 'jpg':
    case 'jpeg':
      return 'image/jpeg';
    case 'png':
      return 'image/png';
    default:
      return '';
  }
}

提示：Embed渲染图片很轻量，PDF的预览效果和iframe差不多，适合追求简洁的场景。

最后几点注意事项 #

• 一定要在模态框关闭时调用window.URL.revokeObjectURL，不然临时URL会一直占用内存。
• 如果你的模态框不是用ng-bootstrap，只需要调整模态框的打开和事件监听逻辑，核心的预览代码是通用的。
• 你指定的.pdf,.jpg,.jpeg,.png这几种文件类型，用上面的两种方案都能完美支持。

内容的提问来源于stack exchange，提问作者rodrigo-nascimento