Question

我试图使用与系统关联的任何编辑器直接使用Angular应用程序打开本地驱动器中可用的文件。

HTML

<a href="file:///C:/Users/Public/Pictures/Sample%20Pictures/Desert.jpg">  
<span  (click)="openFile(parameter)">Open file</span></a>

我也尝试在没有帮助的情况下使用以下方法。

window.open("file:///C:/Users/Public/Pictures/Sample%20Pictures/Desert.jpg")

但是我在浏览器控制台中收到以下错误消息：

不允许访问本地资源

我知道我们不能直接使用angular应用程序直接访问本地驱动器文件。

有没有办法打开任何类型的文件（例如jpg，docx，txt等）？

我知道这是一个常见问题，您的回答肯定会帮助很多人。

谢谢。

Answer 1

如果您使用的是chrome，则出于安全原因，chrome会专门以这种方式阻止本地文件访问。

有一个解决方法，可以在这里How to set the allow-file-access-from-files flag option in Google Chrome

Answer 2

you can load files from the client machine using Javascript FileReader object and.

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

@Component({
  selector: 'app',
  encapsulation: ViewEncapsulation.None,
  template: `<input id="preview" type="file" (change)="previewFile($event)" />`
})
export class AppComponent implements OnInit {
  ...
  public previewImage(event) {
    const reader = new FileReader();
    reader.onload = (e: any) => {
      console.log('csv content', e.target.result);
    };
    reader.readAsDataURL(event.target.files[0]);
  }
}

Answer 3

作为Barr J的答案，这是由于Chrome的安全性原因。

我使用了一个简单的extension服务服务器“ Chrome的Web服务器”。

您选择文件夹（C：\ images），然后在所需的端口上启动服务器。现在通过以下方式访问您的本地文件：

function run(){
   var URL = "http://127.0.0.1:8887/image.jpg";    
   window.open(URL, null);    
}
run();

如何从本地驱动器打开文件-Angular 4

3 个答案: