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

Question

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:

[HttpPost]
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;
            rd.Load(strPath);
            rd.SetDataSource(konta);
            var tip = ExportFormatType.PortableDocFormat;
            var pdf = rd.ExportToStream(tip);
           response.Headers.Clear();
            response.Content = new StreamContent(pdf);
            response.Content.Headers.ContentType = new MediaTypeHeaderValue("application/pdf");
            return response;

}

My Javascript code is:

  $scope.xxprint = function () {
        console.log($scope.konta);
        $http.post('/api/konto/setReport/pdf', $scope.konta, { responseType: 'arraybuffer' })
            .success(function (data) {
                 var file = new Blob([data], { type: 'application/pdf' });
                var fileURL = URL.createObjectURL(file);
                window.open(fileURL);
            });
    };

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

take a look at [this one][1] ,shows how to export pdf file [1]: stackoverflow.com/questions/17094822/… — sakir
– sakir, Commented Feb 22, 2014 at 7:11
I don't want it to be saved to a file. I am building a single page application (angularjs) and what I need is to return the PDF via a web api endpoint call to the client and somehow display it via javascript. — zszep
– zszep, Commented Feb 22, 2014 at 7:21

user3568943 · Accepted Answer · 2014-04-24 13:02:47Z

15

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"); 
    ms.Close(); 
    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);
                    window.open(fileURL);
                });

answered Apr 24, 2014 at 13:02

user3568943

1591 silver badge2 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

zszep Over a year ago

Yes, this works. The crucial part seems to be responseType: 'arrayBuffer' which is only available as of angularjs v1.1

zszep Over a year ago

I did not succeed make it work in IE, though. IE seems to treat fileURL as being in another domain.

DanielV Over a year ago

Your server method helped me a lot to get audio bytes consumed by a simple javascript function. Thanks for it!!!!

zszep · Accepted Answer · 2023-01-05 12:59:46Z

8

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' parameter (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?

edited Jan 5, 2023 at 12:59

answered Feb 23, 2014 at 7:11

zszep

4,4935 gold badges41 silver badges58 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related