如何在Angular2中使用ng2-pdf-viewer在新窗口打开PDF？

我来帮你搞定这个需求！要实现在新窗口打开PDF且禁止下载，我们不能直接用普通超链接（因为浏览器默认允许下载），而是要通过动态创建新窗口并嵌入ng2-pdf-viewer，同时配合配置和额外限制来达成目标。下面是具体的实现步骤：

1. 准备工作：安装并导入ng2-pdf-viewer #

首先确保你已经安装了依赖包：

npm install ng2-pdf-viewer --save

然后在你的Angular模块（比如AppModule）中导入PdfViewerModule：

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], // 添加到imports数组
  bootstrap: [AppComponent]
})
export class AppModule { }

2. 编写组件逻辑：打开新窗口并嵌入PDF查看器 #

在你的组件TS文件中，添加一个方法来创建新窗口，动态渲染ng2-pdf-viewer并配置禁用下载的参数：

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

@Component({
  selector: 'app-pdf-handler',
  templateUrl: './pdf-handler.component.html',
  styleUrls: ['./pdf-handler.component.css']
})
export class PdfHandlerComponent {
  // 替换成你的PDF文件URL
  targetPdfUrl = 'https://example.com/your-document.pdf';

  openPdfInNewWindow(): void {
    // 创建新窗口，设置初始尺寸
    const pdfWindow = window.open('', '_blank', 'width=900,height=700,top=100,left=100');
    if (!pdfWindow) {
      alert('浏览器阻止了弹出窗口，请先允许本站的弹出权限哦');
      return;
    }

    // 构建新窗口的HTML内容，引入Angular打包后的必要资源
    // 注意：runtime.js、polyfills.js等文件路径要和你项目打包后的实际路径一致
    pdfWindow.document.write(`
      <!DOCTYPE html>
      <html lang="zh-CN">
      <head>
        <title>PDF文档查看</title>
        <style>
          body { margin: 0; padding: 20px; font-family: sans-serif; }
          pdf-viewer { display: block; width: 100%; height: 90vh; border: 1px solid #eee; }
        </style>
        <script src="runtime.js"></script>
        <script src="polyfills.js"></script>
        <script src="styles.js"></script>
        <script src="vendor.js"></script>
        <script src="main.js"></script>
      </head>
      <body>
        <h2>PDF文档</h2>
        <pdf-viewer 
          [src]="'${this.targetPdfUrl}'"
          [show-download-button]="false" <!-- 禁用内置下载按钮 -->
          [print]="false" <!-- 可选：禁用打印功能 -->
          [zoom]="1"
          [original-size]="false"
          [autoresize]="true"
        ></pdf-viewer>
      </body>
      </html>
    `);

    // 禁用新窗口的右键菜单，防止用户通过"另存为"下载
    pdfWindow.document.addEventListener('contextmenu', (e) => {
      e.preventDefault();
      // 可选：提示用户右键功能已禁用
      // alert('右键菜单已禁用，无法下载此文档');
    });

    pdfWindow.document.close();
  }
}

3. 前端触发按钮/链接 #

在组件的HTML模板中，添加触发打开新窗口的元素：

<!-- 按钮样式 -->
<button class="pdf-open-btn" (click)="openPdfInNewWindow()">
  在新窗口查看PDF
</button>

<!-- 或者超链接样式 -->
<a href="javascript:void(0)" class="pdf-link" (click)="openPdfInNewWindow()">
  点击查看PDF文档
</a>

4. 增强安全性的额外建议 #

前端的限制只能起到基础防护，要彻底禁止下载，建议配合后端做以下处理：

• 设置HTTP响应头：返回PDF时添加Content-Disposition: inline; filename="your-document.pdf"，强制浏览器以内联方式打开而非下载；同时添加X-Content-Type-Options: nosniff防止MIME类型嗅探。
• 生成临时有效链接：让后端生成带过期时间的PDF访问链接，过期后无法再次访问。
• 权限验证：后端接口验证用户权限后再返回PDF流，避免未授权用户直接获取PDF文件。

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