Question

我想要在新标签中点击按钮时显示PDF .. PDF位于file：//myserver/Docs/nameofpdf.pdf。这是动态的，将根据为PDF名称指定的参数进行更改。

这可能吗？

我在尝试：

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

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

Answer 1

如果你一起使用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);
        }

角：

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

Answer 2

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

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

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

2 个答案: