iframe预览文件时文件名显示随机字符串的解决办法咨询

看起来你已经走对路了——已经从响应头里拿到了真实的文件名，但问题出在Blob URL本身不携带文件名信息，浏览器默认的下载行为（比如PDF预览里的下载按钮）只会用随机生成的字符串当文件名。下面给你分步解决这个问题，同时优化现有代码：

第一步：先把文件名存下来，优化iframe的显示体验 #

你现在只是在subscribe里定义了filename变量，但没把它存在组件里，也没用到iframe上。先调整你的代码：

1. 在组件类里新增两个变量：

documentFilename: string = 'desconocido.pdf';
documentBlob: Blob | null = null; // 用来保存文件Blob，后续做下载用

2. 在obtenerDocumentoNormal的subscribe回调里，把文件名和Blob存起来，同时优化文件名的解析逻辑（兼容更多content-disposition格式）：

obtenerDocumentoNormal() {
  this.obtenerDoc.obtenerDoc(this.nodeId, this.token).subscribe(
    (response) => {
      const contentDisposition = response.headers.get('content-disposition');
      if (contentDisposition) {
        // 优化解析逻辑，兼容带引号、不带引号、UTF-8编码的文件名
        let filename = 'desconocido.pdf';
        // 匹配带引号的情况
        const quotedMatch = /filename="(.+)"/.exec(contentDisposition);
        if (quotedMatch?.[1]) {
          filename = quotedMatch[1];
        } else {
          // 匹配不带引号的情况
          const plainMatch = /filename=([^;]+)/.exec(contentDisposition);
          if (plainMatch?.[1]) {
            filename = plainMatch[1].trim();
          } else {
            // 匹配UTF-8编码的文件名（比如中文、特殊字符）
            const utf8Match = /filename\*=UTF-8''([^;]+)/.exec(contentDisposition);
            if (utf8Match?.[1]) {
              filename = decodeURIComponent(utf8Match[1]);
            }
          }
        }
        this.documentFilename = filename;
      }
      this.documentBlob = response.body; // 保存Blob
      const objectUrl = URL.createObjectURL(response.body);
      this.nodoUrl = this.sanitizer.bypassSecurityTrustResourceUrl(objectUrl);
      // ... 你的其他状态设置代码不变
    },
    (error) => {
      console.error(error);
      MessageUtil.showAlertMessage("No se puede visualizar este tipo de documento");
    }
  );
}

3. 调整HTML里的iframe，把title改成真实文件名，提升用户体验：

<iframe *ngIf="isFrame" [src]="nodoUrl" class="container__frame" name="documento" [title]="documentFilename"></iframe>

第二步：实现自定义下载按钮，解决文件名问题 #

因为Blob URL的默认下载会用随机名，所以我们自己做一个下载按钮，强制使用真实文件名：

1. 在HTML里添加下载按钮（和iframe放在一起）：

<iframe *ngIf="isFrame" [src]="nodoUrl" class="container__frame" name="documento" [title]="documentFilename"></iframe>
<button *ngIf="isFrame && documentBlob" (click)="descargarDocumento()" class="download-btn">下载文件</button>

2. 在组件类里实现下载方法：

descargarDocumento() {
  if (!this.documentBlob || !this.documentFilename) return;
  
  const link = document.createElement('a');
  link.href = URL.createObjectURL(this.documentBlob);
  link.download = this.documentFilename; // 这里指定真实文件名
  // 触发点击下载
  document.body.appendChild(link);
  link.click();
  // 清理资源
  document.body.removeChild(link);
  URL.revokeObjectURL(link.href);
}

第三步：优化内存泄漏问题 #

Blob URL会占用浏览器内存，记得在组件销毁时释放资源：

import { OnDestroy } from '@angular/core';

// 让组件实现OnDestroy接口
export class TuComponent implements OnDestroy {
  // ... 你的其他代码

  ngOnDestroy() {
    // 释放iframe用的Blob URL
    if (this.nodoUrl) {
      const originalUrl = this.nodoUrl.changingThisBreaksApplicationSecurity;
      URL.revokeObjectURL(originalUrl);
    }
    // 释放下载用的Blob URL（如果还有未释放的）
    if (this.documentBlob) {
      // 可以在这里额外处理，或者确保下载时已经释放
    }
  }
}

补充说明 #

如果是PDF这类带内置下载按钮的文件，浏览器默认的下载按钮还是会用随机名，所以建议：

• 要么引导用户使用你自定义的下载按钮
• 要么如果是Angular的PDF预览场景，也可以考虑用专门的PDF预览组件（比如ngx-extended-pdf-viewer），这类组件支持自定义下载文件名。

备注：内容来源于stack exchange，提问作者Carolina Castillo