如何在Angular中显示本地PDF并实现打印功能？

嘿，这个问题我之前帮不少开发者解决过，核心原因是浏览器的安全限制——直接用C:\Users\xx\Desktop\xyz.pdf这种本地路径加载PDF会被浏览器拦截，因为出于安全考虑，网页不能直接读取用户本地文件系统的内容，除非用户主动授权。你之前用的Google Drive Viewer是用来加载在线PDF的，它根本没法访问你本地的文件，所以报错是必然的。

这里有两种靠谱的解决方案，你可以根据自己的业务场景选择：

方案一：通过文件选择器让用户主动上传（推荐，合规安全） #

这是最符合浏览器安全规范的做法，让用户通过文件选择器选择本地PDF，然后我们生成临时URL来加载并提供打印功能。

步骤1：组件模板代码 #

<div class="pdf-container">
  <input type="file" accept=".pdf" (change)="handleFileSelected($event)" class="file-input">
  <iframe 
    #pdfViewer 
    frameBorder="0" 
    scrolling="auto" 
    height="80vh" 
    width="100%" 
    *ngIf="pdfUrl"
  ></iframe>
  <button (click)="printPdf()" *ngIf="pdfUrl" class="print-btn">打印PDF</button>
</div>

步骤2：组件类代码 #

import { Component, ViewChild, ElementRef, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-local-pdf-viewer',
  templateUrl: './local-pdf-viewer.component.html',
  styleUrls: ['./local-pdf-viewer.component.css']
})
export class LocalPdfViewerComponent implements OnDestroy {
  pdfUrl: string | null = null;
  @ViewChild('pdfViewer') pdfViewer!: ElementRef<HTMLIFrameElement>;

  handleFileSelected(event: Event): void {
    const fileInput = event.target as HTMLInputElement;
    if (fileInput.files?.length) {
      const selectedFile = fileInput.files[0];
      // 生成临时Blob URL，用于iframe加载
      this.pdfUrl = URL.createObjectURL(selectedFile);
    }
  }

  printPdf(): void {
    // 调用iframe内部的打印功能
    this.pdfViewer.nativeElement.contentWindow?.print();
  }

  ngOnDestroy(): void {
    // 组件销毁时释放临时URL，避免内存泄漏
    if (this.pdfUrl) {
      URL.revokeObjectURL(this.pdfUrl);
    }
  }
}

方案说明 #

• 用户通过input[type="file"]主动选择本地PDF，浏览器会授予临时访问权限
• URL.createObjectURL生成的临时URL只在当前会话有效，不会泄露本地文件路径
• 打印功能直接调用PDF所在iframe的contentWindow.print()，能触发PDF的原生打印选项

方案二：放宽浏览器安全限制（仅适合测试/内部环境，不推荐） #

如果你的应用是在完全可控的内网环境或者测试场景下使用，可以通过修改浏览器启动参数来允许本地文件访问，但强烈不推荐在生产环境使用，因为会大幅降低浏览器的安全级别。

以Chrome为例： #

1. 关闭所有正在运行的Chrome窗口
2. 右键点击Chrome快捷方式，选择「属性」
3. 在「目标」栏末尾添加参数： --allow-file-access-from-files --disable-web-security（注意前面有空格）
4. 点击「确定」后重新启动Chrome

之后你就可以直接用本地路径加载PDF了，但请记住，这个操作会让浏览器跳过很多安全检查，只适合临时测试。

注意：这种方法在不同浏览器的参数可能不同，而且浏览器版本更新后可能失效，所以还是优先用方案一。

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