Question

我遇到了Angular 2在Iframe或任何控件中显示PDF的问题。

你能指导我吗？

我的Web API代码：

 [Route("GetReportStream")]
    [HttpPost]
    public HttpResponseMessage GetReportStream(string strReportUrl)
    {
        strReportUrl = "http://sample.com/ReportServer?%2fN+Team+3%2fD+Online+Reports%2fMemo+to+the+Court&rs:Command=Render&rc:Parameters=False&DocumentID=8&rs:Format=PDF";

        byte[] pdf;
        byte[] buffer = new byte[4096];
        try
        {
            WebRequest request = WebRequest.Create(strReportUrl);
            request.UseDefaultCredentials = true;
            using (WebResponse resp = request.GetResponse())
            {
                using (Stream responseStream = resp.GetResponseStream())
                {
                    using (MemoryStream memoryStream = new MemoryStream())
                    {
                        int count = 0;
                        do
                        {
                            count = responseStream.Read(buffer, 0, buffer.Length);
                            memoryStream.Write(buffer, 0, count);
                        } while (count != 0);
                        pdf = memoryStream.GetBuffer();
                    }
                }
            }
        }
        catch (Exception ex)
        {
            pdf = null;
        }
        var response = Request.CreateResponse<byte[]>(HttpStatusCode.OK, pdf);            
        return response;
    }

我作为Byte返回，我收到它。

private getReportStreamOnSuccess(response): void {
    debugger;        
    var byteArray = new Uint8Array(response);
    var blob = new Blob([byteArray], { type: 'application/pdf' });
    //var file = new Blob([response], { type: 'application/pdf' });
    var fileURL = URL.createObjectURL(blob);
    this.url = this.domSanitizer.bypassSecurityTrustResourceUrl(fileURL);
}

我尝试了所有选项没有任何工作。

我只想在iframe或任何控件中查看它。

当我尝试加载blob时，我得到了这个 Image

Answer 1

我刚才发现这个链接，希望它有所帮助。 http://www.devsplanet.com/question/35368633＆＃39; 基本上：实际上，此功能尚未在HTTP支持中实现。

作为一种解决方法，您需要扩展Angular2的BrowserXhr类，如下所述，将responseType设置为基础xhr对象上的blob：

import {Injectable} from 'angular2/core';
import {BrowserXhr} from 'angular2/http';

@Injectable()
export class CustomBrowserXhr extends BrowserXhr {
  constructor() {}
  build(): any {
    let xhr = super.build();
    xhr.responseType = "blob";
    return <any>(xhr);
  }
}

然后，您需要将响应有效负载包装到Blog对象中，并使用FileSaver库打开下载对话框：

downloadFile() {
  this.http.get(
    'https://mapapi.apispark.net/v1/images/Granizo.pdf').subscribe(
      (response) => {
        var mediaType = 'application/pdf';
        var blob = new Blob([response._body], {type: mediaType});
        var filename = 'test.pdf';
        saveAs(blob, filename);
      });
}

FileSaver库必须包含在HTML文件中：

<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2014-11-29/FileSaver.min.js"></script>

请参阅此plunkr：http://plnkr.co/edit/tfpS9k2YOO1bMgXBky5Y?p=preview

不幸的是，这将为所有AJAX请求设置responseType。为了能够设置此属性的值，XHRConnection和Http类中还有更多要做的更新。

参考文献请参阅以下链接：

https://stackoverflow.com/questions/34586671/download-pdf-file-using-jquery-ajax

Receive zip file, angularJs

PDF显示角度2

1 个答案: