在新选项卡中打开本地PDF Angular 2

Question

我有一个PDF，我想在按钮上点击一个新标签显示PDF。PDF位于file：//myserver/Docs/nameofpdf.pdf。这是动态的，并且将根据给出的PDF名称的参数进行更改。

这可能吗？

我想：

window.open("file://myserver/Docs/nameofpdf.pdf"); 

然而，它只是打开一个空白标签，并没有任何反应。

Answer 1

用三个斜杠尝试： window.open("file:///myserver/Docs/nameofpdf.pdf"); 或删除file协议。

假设此应用程序仅在本地运行。

Answer 2

如果您一起使用Web API和角度2-4，这里是一个很好的例子。

的Web API：

public HttpResponseMessage File(string fileName, string mimeType, byte[] content) 
     { 
      //create stream 
      HttpResponseMessage httpResponseMessage = new HttpResponseMessage(); 
      httpResponseMessage.Content = new ByteArrayContent(content); 
      httpResponseMessage.Content.Headers.Add("x-filename", fileName); 
      httpResponseMessage.Content.Headers.ContentType = new MediaTypeHeaderValue(mimeType); 
      httpResponseMessage.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment"); 
      httpResponseMessage.Content.Headers.ContentDisposition.FileName = fileName; 
      httpResponseMessage.Content.Headers.ContentLength = content.Length; 
      httpResponseMessage.StatusCode = HttpStatusCode.OK; 

      return httpResponseMessage; 
     } 

角：

//get Blob data from file and open it new tab 
     openPdfToNewTab(url: string) { 
      Observable.create(observer => { 
       let xhr = new XMLHttpRequest(); 
       xhr.open('GET', this.getFullPathUrl(url), true); 
       xhr.setRequestHeader('Content-type', 'application/pdf'); 
       xhr.responseType = 'blob'; 

       xhr.onreadystatechange =() => { 
        if (xhr.readyState === 4) { 
         if (xhr.status === 200) { 
          var contentType = 'application/pdf'; 
          var blob = new Blob([xhr.response], { type: contentType }); 
          observer.next(blob); 
          observer.complete(); 
         } else { 
          observer.error(xhr.response); 
         } 
        } 
       } 
       xhr.send(); 
      }).subscribe(data => { 
        var blob = new Blob([(<any>data)], { type: 'application/pdf' }); 
        var url = window.URL.createObjectURL(blob); 
        window.open(url); 
       }, 
       err => { 
       }, 
       () => { }); 
     }; 

用法：

API：

[HttpGet] 
     public HttpResponseMessage GetMainPdf(int taskId)//, string token 
     { 
      //your code here 
      var fileData = GetFile(); //some code here 
      // return file 
      return File($"{fileData.FileName}", fileData.MimeType, fileData.Content); 
     } 

Angular：

//you can call this function on click 
getMainPdf() { 
     return this.openPdfToNewTab(YOUR-API-URL); //url for download file 
    }