How to display a server side generated PDF stream in javascript sent via HttpMessageResponse Content

On my server side I am using ASP.NET MVC Web Api, where I am generating the PDF file with Crystal report and exporting it to PDF format. The code goes as follows:

public HttpResponseMessage SetReport(string name, [FromBody]List<KontoDto> konta)
            var response = Request.CreateResponse(HttpStatusCode.OK);
            var strReportName = "KontoReport.rpt";
            var rd = new ReportDocument();
            string strPath = HttpContext.Current.Server.MapPath("~/") + "Reports//" + strReportName;
            var tip = ExportFormatType.PortableDocFormat;
            var pdf = rd.ExportToStream(tip);
            response.Content = new StreamContent(pdf);
            response.Content.Headers.ContentType = new MediaTypeHeaderValue("application/pdf");
            return response;


My Javascript code is:
  $scope.xxprint = function () {
        $'/api/konto/setReport/pdf', $scope.konta, { responseType: 'arraybuffer' })
            .success(function (data) {
                 var file = new Blob([data], { type: 'application/pdf' });
                var fileURL = URL.createObjectURL(file);

This simply does not work. I don’t know what’s wrong with this code. I get the browser to open the pdf viewer, but it is empty. Also, the created pdf is correctly created as I can save it to disk and open it then with Adobe Acrobat viewer. The content of the HttpResponseMessage seems also correct viewed via Fiddler. See image:

enter image description here


Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

This link helped us a lot. Below Solution worked greatly for me.
In our case OFF LINE storing in Stream in DB:

    //Reading the exising pdf file   
    byte[] bytes = File.ReadAllBytes(pafTemplate);
    //gettting memory stream object and writing in to it   
    var stream = new MemoryStream();
    stream.Write(bytes, 0, bytes.Length);
    //For our custom need we are placing the memory stream in one of the column
    PdfDataTable.PdfFormDataColum = stream.GetBuffer();

Web-API Code:
[GET("api/pdf/getPdfRecordData/{pdfId}")] //AttributeRouting
public HttpResponseMessage GetPdfRecordData(int pdfId) 
    HttpResponseMessage response = Request.CreateResponse(HttpStatusCode.OK, "value"); 
    MemoryStream ms = GetPdfMemoryStreamFromDataBase(pafId); 
    response.Content = new ByteArrayContent(ms.ToArray()); 
    response.Content.Headers.ContentType = new MediaTypeHeaderValue("application/pdf"); 
    return response; 

AngularJs Code:
$http.get('api/pdf/getPdfRecordData/10', null, { responseType: 'arraybuffer' })
                .success(function (data) {
                     var file = new Blob([data], { type: 'application/pdf' });
                    var fileURL = URL.createObjectURL(file);

Method 2

Seems I did it correctly all the time. The problem was with my angularjs version (v1.08). When upgrading to v1.2 everything worked ok. In v1.08 the responseType: 'arraybuffer' paramater (which is crucial to what I was doing) was simply ignored by angularjs. It seems to be implemented as of v.1.1. See this SO question: How to read binary data in AngularJS in an ArrayBuffer?

All methods was sourced from or, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Notify of

Inline Feedbacks
View all comments
Would love your thoughts, please comment.x