如何修改Chrome PDF查看器下载Angular嵌入PDF的默认文件名

嘿，这个问题我之前也碰到过——Chrome的PDF查看器确实没办法从base64的data URL里提取文件名，所以只能默认用download.pdf。不过咱们可以通过自定义下载按钮的方式绕过这个限制，既保留iframe的预览功能，又能指定下载文件名，具体步骤如下：

核心思路 #

Chrome的PDF插件不识别data URL里的文件名元数据，所以咱们不能依赖它自带的下载按钮。取而代之的是，自己实现一个下载逻辑：把base64编码的PDF转成Blob对象，再通过<a>标签的download属性指定自定义文件名。

具体实现（Angular环境） #

1. 组件中添加base64转Blob的方法 #

先写一个工具函数，把你的base64字符串转换成Blob对象：

import { Component } from '@angular/core';
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';

@Component({
  selector: 'app-pdf-viewer',
  templateUrl: './pdf-viewer.component.html'
})
export class PdfViewerComponent {
  docSrc: SafeResourceUrl;
  // 假设你的base64 PDF字符串存在这里
  private base64Pdf = "data:application/pdf;base64,JVBERi0xLjMKMyA...";

  constructor(private sanitizer: DomSanitizer) {
    // 处理安全资源URL（你应该已经做过这一步了）
    this.docSrc = this.sanitizer.bypassSecurityTrustResourceUrl(this.base64Pdf);
  }

  // 将base64转成Blob
  private getPdfBlob(base64Data: string): Blob {
    // 剥离data URL前缀，只保留base64编码部分
    const rawBase64 = base64Data.split(',')[1];
    const byteCharacters = atob(rawBase64);
    const byteNumbers = new Array(byteCharacters.length);
    
    for (let i = 0; i < byteCharacters.length; i++) {
      byteNumbers[i] = byteCharacters.charCodeAt(i);
    }
    
    const byteArray = new Uint8Array(byteNumbers);
    return new Blob([byteArray], { type: 'application/pdf' });
  }
}

2. 添加自定义下载按钮和方法 #

在组件模板里保留iframe预览，同时添加一个下载按钮：

<iframe [src]="docSrc" type="application/pdf" width="100%" height="600px"></iframe>
<button (click)="downloadCustomPdf()">下载PDF</button>

然后在组件类里实现下载方法：

downloadCustomPdf() {
  const pdfBlob = this.getPdfBlob(this.base64Pdf);
  const blobUrl = window.URL.createObjectURL(pdfBlob);
  
  // 创建临时a标签触发下载
  const downloadLink = document.createElement('a');
  downloadLink.href = blobUrl;
  downloadLink.download = "我的自定义文件名.pdf"; // 这里设置你想要的文件名
  document.body.appendChild(downloadLink);
  downloadLink.click();
  
  // 清理资源
  window.URL.revokeObjectURL(blobUrl);
  document.body.removeChild(downloadLink);
}

为什么这个方法有效？ #

通过Blob对象生成的URL，配合<a>标签的download属性，浏览器会直接使用你指定的文件名，完全绕过Chrome PDF查看器的默认下载逻辑。这样用户既能在iframe里预览PDF，又能通过你的按钮下载到指定文件名的文件。

额外说明 #

如果你尝试过直接修改data URL来添加文件名，比如data:application/pdf;name=myfile.pdf;base64,...，很遗憾这是无效的——Chrome的PDF查看器不会解析这个自定义参数。所以自定义下载按钮是目前最可靠的解决方案。

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