不使用第三方库如何在Angular项目中内嵌显示PDF而非触发下载

出现点击打开直接下载的核心原因通常是两个：一是PDF资源的HTTP响应头Content-Disposition被设置为attachment，二是标签兼容性或资源路径配置有误，可按以下方案逐一排查解决：

方案1：调整HTTP响应头配置 #

如果PDF资源是后端接口返回的，需要将响应头的Content-Disposition值改为inline，浏览器收到该配置后会优先尝试内嵌展示PDF，而非直接触发下载。
如果是放在Angular本地assets目录的静态PDF，部署时要确保静态资源服务器的PDF响应头配置为inline，nginx配置示例如下：

location ~* \.pdf$ {
    add_header Content-Disposition "inline";
}

方案2：使用Angular专用PDF组件（兼容性最优） #

如果不想受浏览器默认PDF插件的限制，推荐使用ng2-pdf-viewer第三方组件，完全由前端渲染PDF，不会触发自动下载：

• 第一步：安装依赖

npm install ng2-pdf-viewer --save

• 第二步：在对应模块中导入组件

// 比如app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { PdfViewerModule } from 'ng2-pdf-viewer';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, PdfViewerModule],
  bootstrap: [AppComponent]
})
export class AppModule { }

• 第三步：替换HTML模板中的embed标签

<pdf-viewer
  [src]="'/assets/AOK_T2DM.pdf'"
  style="width: 100%; height: 500px;"
  [render-text]="true"
  [original-size]="false"
></pdf-viewer>

注意：静态资源路径直接写绝对路径/assets/xxx即可，避免相对路径在路由跳转时失效

方案3：无依赖方案，替换为object标签 #

如果不想引入第三方依赖，可将embed标签替换为兼容性更好的object标签：

<object data="/assets/AOK_T2DM.pdf" type="application/pdf" style="width: 100%; height: 500px;">
  <p>当前浏览器不支持内嵌PDF展示，可<a href="/assets/AOK_T2DM.pdf">点击下载</a>查看。</p>
</object>

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