How to Open .pdf on a new Tab

Question

The Objective:

I have to print a PDF on a new tab after some tasks have finished correctly.

Steps: I want to execute a method that should go to the server, take the PDF and open it on a new Tab, I was trying with these but is not working:

Controller: Export

 public ActionResult PrintPdf()
    {
        Response.AppendHeader("Content-Disposition", "inline; filename= " + MyClassPdfWriter.GetFileName);
        return File(MyClassPdfWriter.GetMemoryStream, "application/pdf");
    }

View:

function TasksSucced(){
      $.get('@Url.Action("PrintPdf", "Export", "new {target = _blank}")');
}

maybe it works but.. that's a little bit dirty.. jeje I'm gonna take a look if there's a better choice, if not I will use for sure your option :D — user1520494, Apr 11 '13 at 09:38
yes actually it is a dirty hack. :D Let me also know if you find anything better. :) — Raman, Apr 11 '13 at 09:46

score 33 · Accepted Answer · answered Apr 11 '13 at 10:07

33

Solved! That works for me

 window.open('/Export/PrintPdf');

answered Apr 11 '13 at 10:07

user1520494

1,134
2
11
27

4

The popup blocker is preventing the pdf from downloading in chrome, is there a way to circunvent it? (telling user to allow pop up for this page is beyond their comprehension :/ – cpacheco Apr 25 '16 at 15:17
3

Does not work for `base64` encoded files. At least in Chrome. – Esamo Oct 05 '18 at 10:15
3

@cpacheco you can circumvent the popup blocker by only opening the tab in response to a user action. In other words, have them click a button to open it. So have a button that directly calls window.open(). – Kaz Vorpal Jun 29 '21 at 18:04

score 12 · Answer 2 · answered Jun 12 '19 at 22:27

There several ways to download or view the PDF.

View

You can set the content-type as application/pdf in the response header just like Content-Type: application/pdf

And in order to open it to new tab in javascript, please add this code.

window.open("Here Download PDF url", '_blank');

Download

You need to set the content-type as application/octet-stream in the response header just like application/octet-stream.

And add download HTML5 attribute to a tag or just target="_blank".

<a href="PDF URL" download="pdf">Download</a>
<a href="PDF URL" target="_blank">Download</a>

So you can use PDF.js or 3rd library to view the PDF in iFrame or inline page.

score 4 · Answer 3 · answered Dec 03 '14 at 12:14

4

$("a[target!='_blank'][href$='.pdf']").attr("target", "_blank");

answered Dec 03 '14 at 12:14

Timtech

1,224
2
19
30

Exaclty what I needed :-) Thx – Vincent Guesné Jul 03 '18 at 18:15
@Mepps Great! Glad I could help :) – Timtech Jul 03 '18 at 18:54

score 4 · Answer 4 · answered Feb 06 '18 at 19:03

4

If anyone is having a similar problem, none of the above solutions worked for me in Google Chrome (they did work in Firefox)

This code worked in all major browsers:

var a = document.createElement('A');
var filePath = 'https://pathtopdf.com/file.pdf';
a.href = filePath;
a.download = filePath.substr(filePath.lastIndexOf('/') + 1);
document.body.appendChild(a);
a.click();
document.body.removeChild(a);

answered Feb 06 '18 at 19:03

Jordash

2,926
8
38
77

3

Does not work for `base64` encoded files. At least in Chrome. – Esamo Oct 05 '18 at 10:15
11

That downloads the file instead of opening it in a new tab as per question. – Esamo Oct 05 '18 at 10:18

score 0 · Answer 5 · answered Mar 25 '17 at 23:54

0

You can use the following solution

   jQuery('<form target="_blank" action="' + URL + '" method="get"></form>').appendTo('body').submit().remove();

where URL is the pdf url...

answered Mar 25 '17 at 23:54

Ephy L

69
5

Does not work for base64 encoded files. At least in Chrome. – Esamo Oct 05 '18 at 10:17

score 0 · Answer 6 · answered Nov 20 '18 at 08:24

You can try using jQuery.deffered. I prepared sample function for you. It will process getPdf call, and then will resolve promise. Hope this helps

function getPDF() {
    return '';
}

getPdf()
  .then(function(response) {
    console.log('response here' + response);
    window.open(response);
  }).fail(function(){
      console.error('failed reposne');
  });

score 0 · Answer 7 · answered May 23 '23 at 10:42

0

const openPDF = (link: string) => {
    window.open(link, '_blank');
  };

Just use this simple and easy method

answered May 23 '23 at 10:42

Ajay Kumar

1

1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community May 23 '23 at 10:58

Hasan Yüksektepe · Answer 8 · 2023-02-01T09:54:42.173

https://stackoverflow.com/a/72527783

It's work me.

My sample code

    var order_id = $(this).data('order_id');

    var url = 'pdf url';

    var data      = {
        order_id
    };

    var myHeaders = new Headers();
    myHeaders.append("Content-Type", "application/x-www-form-urlencoded");

    var urlencoded = new URLSearchParams();
    urlencoded.append("param", JSON.stringify(data));

    var requestOptions = {
        method  : 'POST',
        headers : myHeaders,
        body    : urlencoded,
        redirect: 'follow'
    };

    fetch(url, requestOptions)
    .then((response) => response.blob())
    .then((blob) => {
        const _url = window.URL.createObjectURL(blob);
        window.open(_url, '_blank');
    }).catch((err) => {
        console.log(err);
    });

How to Open .pdf on a new Tab

8 Answers8

Linked