CODEWITHSUNDEEP
javascriptangularjsasp.net-web-api
sqlcte
sqlcte

Reputation: 425

Angularjs Displaying pdf/image files in new popup window

I am trying to display images and pdf files in a new popup window.The document is saved in the database as byte array.This is my server side code.

 public HttpResponseMessage GetUserDocumentByDocumentId(int documentId)
    {
        HttpResponseMessage result = null;
        try
        {

            RegistrationManager registrationManager = new RegistrationManager();
            var file = registrationManager.GetUserDocumentByDocumentId(documentId);
            result = Request.CreateResponse(HttpStatusCode.OK);
            result.Content = result.Content = new ByteArrayContent(file.DocumentObject);
            result.Content.Headers.ContentDisposition = new System.Net.Http.Headers.ContentDispositionHeaderValue("attachment");
            result.Content.Headers.ContentType = new MediaTypeHeaderValue(file.DocumentExtension);
            result.Content.Headers.ContentDisposition.FileName = file.DocumentName;
            result.Content.Headers.Add("x-filename", file.DocumentName);
            return result;
        }
        catch (Exception ex)
        {
            throw new HttpResponseException(FBSHttpResponseException.HttpResponseMessage(ex));
        }
    }

Client side code is like that 

 var windowWidth = 1000;
 var windowHeight = 550;
 var left = (screen.width / 2) - (windowWidth / 2);
 var top = ((screen.height / 2) - (windowHeight / 2)) - 50;
 if (typeof reportWindow != 'undefined' && reportWindow.closed == false) {
 reportWindow.close();
 }
 var url = baseUrl + "/api/user/getuserdocumentbydocumentid/" + userDocId;
 $window.open(url, 'PopupReport', 'scrollbars=yes,status=yes,toolbar=yes,menubar=no,location=no,resizable=no,fullscreen=yes, width=' + windowWidth + ', height=' + windowHeight + ', top=' + top + ', left=' + left);

But instead of displaying them in new window it opens the window and downloads the pdf or image file.

Upvotes: 0

Views: 1827

Answers (2)

Alexander Kravets
Alexander Kravets

Reputation: 4395

You should set the Content-Disposition header to "inline" at backend so that browser tries to render the file instead of downloading it:

result.Content.Headers.ContentDisposition = new System.Net.Http.Headers.ContentDispositionHeaderValue("inline");

See this question Content-Disposition:What are the differences between "inline" and "attachment"?

Upvotes: 1

amrdruid
amrdruid

Reputation: 961

I suggest you use a library like jsPDF.

Check it out here jsPDF

Upvotes: 0

Related Questions