如何在Angular 4中实现window.open()功能并解决本地资源访问报错

嘿，我来帮你搞定这个问题！你遇到的“不允许加载本地资源”错误其实不是Angular的限制，而是Chrome等现代浏览器的安全策略——为了防止恶意网页随意访问用户本地文件系统，浏览器默认禁止网页直接通过file://协议访问本地文件，不管你用原生JS还是Angular都会碰到这个问题。

下面根据你的PDF文件的不同存放位置，给你几个可行的替代方案：

方案1：PDF是Angular项目的静态资源（比如放在assets文件夹） #

如果这个PDF是你项目的一部分，把它放到src/assets目录下，然后用Angular的DomSanitizer处理安全路径后再打开，步骤如下：

1. 首先在组件中导入DomSanitizer：

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

2. 在构造函数中注入DomSanitizer：

@Component({
  selector: 'app-pdf-viewer',
  templateUrl: './pdf-viewer.component.html'
})
export class PdfViewerComponent {
  constructor(private sanitizer: DomSanitizer) {}
}

3. 编写打开PDF的方法：

openPdf() {
  // 项目内的相对路径
  const pdfRelativePath = 'assets/data2.pdf';
  // 处理成安全的URL，避免Angular的安全拦截
  const safePdfUrl: SafeResourceUrl = this.sanitizer.bypassSecurityTrustResourceUrl(pdfRelativePath);
  // 用window.open打开，或者也可以动态创建a标签跳转
  window.open(safePdfUrl.toString(), '_blank');
}

你也可以用动态创建a标签的方式（有时候兼容性更好）：

openPdf() {
  const pdfRelativePath = 'assets/data2.pdf';
  const safePdfUrl = this.sanitizer.bypassSecurityTrustResourceUrl(pdfRelativePath);
  
  const link = document.createElement('a');
  link.href = safePdfUrl.toString();
  link.target = '_blank';
  link.click();
}

方案2：PDF是用户本地的文件 #

如果这个PDF是用户自己电脑上的文件，你不能直接通过file://访问，得让用户主动上传文件，然后通过浏览器的临时URL来预览：

1. 在组件模板中添加文件选择器：

<input type="file" accept=".pdf" (change)="handleFileSelection($event)">

2. 在组件中编写处理方法：

handleFileSelection(event: Event) {
  const input = event.target as HTMLInputElement;
  const file = input.files?.[0];
  
  if (file) {
    // 生成浏览器临时访问URL
    const tempFileUrl = URL.createObjectURL(file);
    // 打开预览
    window.open(tempFileUrl, '_blank');
    // 记得在合适的时机释放临时URL，避免内存泄漏
    setTimeout(() => URL.revokeObjectURL(tempFileUrl), 1000);
  }
}

方案3：PDF部署在服务器上 #

如果PDF是放在你的后端服务器或者云存储上，直接使用完整的HTTP/HTTPS URL即可，不需要特殊处理：

openPdf() {
  const serverPdfUrl = 'https://your-server-domain.com/data2.pdf';
  window.open(serverPdfUrl, '_blank');
}

总结一下：核心问题是浏览器的安全限制，绕过file://直接访问本地文件的方法是不存在的，你需要根据PDF的实际位置选择对应的方案~

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