javascript - Angular 2 - 文件下载 - 没有任何后端帮助 - 可能吗？

Question

我正在玩 Angular 2，试图创建示例应用程序来展示我自己，我已经完成了几乎所有的事情。最后，我正在尝试实现下载选项。为此，我挖掘了 SO 并得到了 this

根据该示例，我尝试复制它，但后来知道 HTTP_PROVIDERS 已被弃用。有人能告诉我目前可用的等效模块是什么吗？并指导我开始。

请分享任何工作的 plunker 以供引用

到目前为止我有以下内容

import { Http, ResponseContentType } from '@angular/http';
export class AboutComponent implements OnInit {

  //constructor() { }
  constructor(private dataService: dataService,private http: Http){}
  about=[];
  private filePath = './coreMachineDetails/machine109902.docx' // docx in my local folder      
   ngOnInit(){
    //some codes
  }

  getFile(){
    return this.http.get(this.filePath,{
      responseType: ResponseContentType.Blob,     
    }).map(res =>{
          return {
        filename: 'machine109902.docx',
        data: res.blob()
      };
    }).subscribe(res => {
        console.log('start download:',res);
        var url = window.URL.createObjectURL(res.data);
        var a = document.createElement('a');
        document.body.appendChild(a);
        a.setAttribute('style', 'display: none');
        a.href = url;
        a.download = res.filename;
        a.click();
        window.URL.revokeObjectURL(url);
        a.remove(); // remove the element
      }, error => {
        console.log('download error:', JSON.stringify(error));
      }, () => {
        console.log('Completed file download.')
      });
  }
}

在 View 中

<button class="btn waves-effect waves-light btn-primary custom-btn" (click)="getFile()"><i class="fa fa-file-pdf-o"></i> Download manuals</button>

Answer 1

由于您引用的是本地文件。它已被框架阻止。查看更多 https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy