TypeScript using chrome built in PDF reader

user_16690745 0
Viewed 235

In my TypeScript Service I am calling this ajax post API that is returning ResponseMessage. The code is running fine I just dont see the PDF file in my download folder or it is not opening chrome built in PDF reader? Is there something I am missing for this to work. Is there anything I need in the TypeScript Service for returning a file that will open built in PDF reader?

html view

<button type="button" class="btn btn-default" (click)="printItems()">Print</button>

TypeScript Service

  printItems(versionKeys: string[]): JQueryPromise<any> {
        return $.ajax({
            type: "post",
            contentType: "application/json",
            data: JSON.stringify(versionKeys),
            url: this.apiUrls.PrintTemplates
        });
    }

Controller Class

[HttpPost]
        [ApplicationApiAuthorize("Administrator, ContentManager")]
        public IHttpActionResult PrintTemplates([FromBody] List<string> versionKeys)
        {
           
            var templates = versionKeys
                    .Select(v => TemplatesDataService.GetTemplate(v))
                    .ToList();

            var templateIds = templates.Select(b => b.Id).ToList();

            var templateFile = TemplatesDataService.PrintTemplate(templateIds);

            var result = new HttpResponseMessage(HttpStatusCode.OK)
            {
                Content = new ByteArrayContent(templateFile.Content)
            };

            result.Content.Headers.ContentDisposition = new System.Net.Http.Headers.ContentDispositionHeaderValue("attachment")
            {
                FileName = templateFile.FileName
            };
            result.Content.Headers.ContentType = new MediaTypeHeaderValue("application/octet-stream");

            var response = ResponseMessage(result);

            return response;
        }
typescript asp.net-mvc c#
1 Answers

If you want to open pdf in default browser pdf reader then follow these steps.

1- Change return mimetype from "application/octet-stream" to "application/pdf". "application/octet-stream" means it is binary file and needs to be downloaded.

2- Change Post to Get.

3- Open a new window with a link or javascript and call your action.

[HttpGet]
[ApplicationApiAuthorize("Administrator, ContentManager")]
public IHttpActionResult PrintTemplates([FromQuery] List<string> versionKeys)
{
   
    var templates = versionKeys
            .Select(v => TemplatesDataService.GetTemplate(v))
            .ToList();

    var templateIds = templates.Select(b => b.Id).ToList();

    var templateFile = TemplatesDataService.PrintTemplate(templateIds);

    var result = new HttpResponseMessage(HttpStatusCode.OK)
    {
        Content = new ByteArrayContent(templateFile.Content)
    };

    result.Content.Headers.ContentDisposition = new System.Net.Http.Headers.ContentDispositionHeaderValue("attachment")
    {
        FileName = templateFile.FileName
    };
    result.Content.Headers.ContentType = new MediaTypeHeaderValue("application/pdf");

    var response = ResponseMessage(result);

    return response;
}

Create a link

<a href="http://yourUrl.com/Print?versionKeys=1&versionKeys=2" class="btn btn-default">Print</a>

Or use javascript (I'm not an expert in typescript but it should be easy to convert it)

var win = window.open('http://yourUrl.com/Print?versionKeys=1&versionKeys=2', '_blank');
if (win)
    win.focus();
 else 
    alert('Please allow popups for this website');
user_59647920
Related