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

【问题标题】：Opening a local PDF in a new tab Angular 2在新选项卡Angular 2中打开本地PDF
【发布时间】：2018-01-23 19:06:17
【问题描述】：

我有一个 PDF，我想在单击新选项卡中的按钮上显示。该 PDF 位于 file://myserver/Docs/nameofpdf.pdf。这是动态的，会根据为 PDF 名称指定的参数而改变。

这可能吗？

我正在尝试：

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

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

【问题讨论】：

标签： javascript angular pdf

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

如果你同时使用 Web API 和 Angular 2-4，这里是一个很好的例子。

网络接口：

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);
        }

角度：

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

【讨论】：