53

I am probably missing something simple here, however i will ask anyway. I have made a link to open up a PDF file, however it opens up in the current tab rather than a new one. What code shall i use in HTML to open a new tab to read the PDF file.

<div class="footer_box_content">
    <div class="cleaner_h10"></div>
    <p>Many  thanks  to  everyone  who cleared snow and ice during the cold spell in February.
    Should Arctic conditions return, each block has a shovel and a jar of rock salt  to  clear  the  steps. 
    Please click more to read the full newsletter.</p>
    <div class="button_01"><a href="newsletter_01.pdf">Read more</a></div>
</div>
miken32
  • 42,008
  • 16
  • 111
  • 154
MultiWizard
  • 689
  • 2
  • 6
  • 5
  • 1
    Does this answer your question? [How to open link in a new tab in HTML?](https://stackoverflow.com/questions/17711146/how-to-open-link-in-a-new-tab-in-html) – miken32 Dec 15 '22 at 16:54

9 Answers9

64
<a href="newsletter_01.pdf" target="_blank">Read more</a>

Target _blank will force the browser to open it in a new window

Chris
  • 3,729
  • 22
  • 30
  • 5
    Nope. If the user has set their browser to do something different with PDF files (like download them) it won't open in a new tab. There's no way to guarantee a PDF to open in a new browser window. – Chuck Le Butt Jun 12 '16 at 21:33
  • @ChuckLeButt Where did I state that this is guaranteed to open the page in a new window? – Chris Feb 01 '17 at 11:38
  • 20
    Quote: `Target _blank will force the browser to open it in a new window`. That's simply not true. You cannot force a browser to open a PDF. It may simply be downloaded, depending on the user's settings, even with the target attribute set to "_blank". See my answer below. – Chuck Le Butt Feb 01 '17 at 15:49
  • Force != guaranteed :) – Chris Jan 18 '19 at 16:21
  • 3
    There is no way to force a browser to open a PDF in a new window. – Chuck Le Butt Jan 20 '19 at 12:18
57

As everyone else has pointed out, this can work:

<a href="newsletter_01.pdf" target="_blank">Read more</a>

But what nobody has pointed out is that it's not guaranteed to work.

There is no way to force a user's browser to open a PDF file in a new tab. Depending on the user's browser settings, even with target="_blank" the browser may react the following ways:

  1. Ask for action
  2. Open it in Adobe Acrobat
  3. Simply download the file directly to their computer

Take a look at Firefox's settings, for example:

enter image description here

Chrome has a similar setting:

enter image description here

If the user has chosen to "Save File" in their browsers settings when encountering a PDF, there is no way you can override it.

Chuck Le Butt
  • 47,570
  • 62
  • 203
  • 289
6

An observation, _blank alone will not make sure the file is opened in a new tab. The response header for the file request should have Content-Type : application/pdf.

Try this link, it will open the file in new tab as the server provide required headers.

Same is the case for other file types also. For ex: video files get request should have proper Content-Type like video/mp4.

JEWEL JACOB
  • 544
  • 6
  • 8
  • 1
    This helped me, I had response header coming as `Content-Type: application/octet-stream` which was downloading the pdf automatically that I didn’t want. `Content-Type : application/pdf` is what I needed it to be. – faruk13 Nov 23 '21 at 07:43
  • "Try this link, it will open the file in new tab"... Not for me in FireFox. It's still opening in the same tab. – dustytrash Jan 12 '22 at 14:39
  • This 'link' does not open in a tab for me; how do you apply the Content-Type to this HTML content? – J-Dizzle Jan 24 '22 at 17:24
  • Every file served by a server will have a Content-Type header. It will be either manually set as per need or derived form file type. And link not opening in new tab in all browsers, I assume there's browser specific settings for file types. In chrome desktop it actually opens in a new tab. – JEWEL JACOB Jan 26 '22 at 08:33
2

You have to use target attribute 

<a href="newsletter_01.pdf" target="_blank">
Nick
  • 4,192
  • 1
  • 19
  • 30
2

Just use target on your tag <a>

<a href="newsletter_01.pdf" target="_blank">Read more</a>

The target attribute specifies where to open the link. Using "_blank" will make your browser to open a new window/tab.

miken32
  • 42,008
  • 16
  • 111
  • 154
Diogo Moreira
  • 1,082
  • 2
  • 9
  • 24
0

Change the <a> tag like this: 

<a href="newsletter_01.pdf" target="_blank">

You can find more about the target attribute here.

gkalpak
  • 47,844
  • 8
  • 105
  • 118
0

On Chrome this has proven to work well for me.

<a href="newsletter_01.pdf" target="_new">Read more</a>
Fastersixth
  • 123
  • 1
  • 2
  • 13
-1

Yes, someone has already mentioned that we can force the browser to open pdf file in new tab by using target, but depending on user's browser setting it may force to download instead of opening and I see most of the browser's settings are like so in default.

The easiest way I found is, using Google Drive. We can upload the document in drive and change the setting that anyone with the link can view the doc. Use that link like below:

<a href="https://drive.google.com/file/d/1yQHmS" target="_blank">

When we click the link, the doc will open in the new tab from drive.

Hasan
  • 9
  • 2
-2

Try this, it worked for me.

<td><a href="Docs/Chapter 1_ORG.pdf" target="pdf-frame">Chapter-1 Organizational</a></td>

Nishanth K Kumar
  • 1
  • More information is needed to understand what this does and why it might work. Please consider explaining your answer. – TylerH Dec 15 '22 at 16:52