如何在Angular10或JavaScript中新窗口打开PDF并修改文件名

实现方法 #

你原来的代码里使用的download属性作用是强制触发浏览器下载行为，自然无法实现新窗口预览PDF的需求。要同时满足「新窗口打开PDF预览」、「自定义PDF默认文件名」两个需求，可以用以下方案：

原生JavaScript实现

// 1. 准备PDF Blob数据，必须指定正确的MIME类型
const pdfBlob = new Blob([pdfBuffer], { type: 'application/pdf' });
// 2. 生成Object URL
const objectUrl = URL.createObjectURL(pdfBlob);
// 3. 拼接自定义文件名到URL末尾，浏览器保存时会识别最后一段为默认文件名
const customPreviewUrl = `${objectUrl}/你要设置的文件名.pdf`;
// 4. 新窗口打开预览
window.open(customPreviewUrl, '_blank');
// 5. 延迟释放Object URL，避免内存泄漏，建议延迟30~60秒保证PDF加载完成
setTimeout(() => URL.revokeObjectURL(objectUrl), 60000);

如果遇到浏览器拦截新窗口的问题，可以改用预创建空窗口的写法：

// 提前在用户点击事件的同步逻辑里创建空窗口，避免被拦截
const previewWindow = window.open('', '_blank');
// 异步获取到Blob后再赋值地址
const pdfBlob = new Blob([pdfBuffer], { type: 'application/pdf' });
const objectUrl = URL.createObjectURL(pdfBlob);
previewWindow.location.href = `${objectUrl}/你要设置的文件名.pdf`;
setTimeout(() => URL.revokeObjectURL(objectUrl), 60000);

Angular 10 适配代码

如果是从接口请求PDF资源，直接在HttpClient中指定响应类型为blob即可：

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

@Component({
  selector: 'app-pdf-preview',
  template: `<button (click)="openPdfPreview()">预览PDF</button>`
})
export class PdfPreviewComponent {
  constructor(private http: HttpClient) {}

  openPdfPreview(): void {
    // 预创建空窗口避免被浏览器拦截
    const previewWin = window.open('', '_blank');
    
    this.http.get('你的PDF资源接口地址', { responseType: 'blob' }).subscribe(pdfBlob => {
      const objectUrl = URL.createObjectURL(pdfBlob);
      const customFileName = '月度销售报表.pdf'; // 替换为你的自定义文件名
      previewWin.location.href = `${objectUrl}/${customFileName}`;
      // 释放资源
      setTimeout(() => URL.revokeObjectURL(objectUrl), 60000);
    });
  }
}

注意事项 #

• 必须给Blob指定正确的application/pdf MIME类型，否则浏览器会识别为二进制文件直接触发下载，不会预览。
• 如果有后端服务支持，也可以直接让后端返回PDF资源时设置Content-Disposition: inline; filename="自定义文件名.pdf"响应头，前端直接打开资源地址即可，无需处理Blob逻辑。

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