Display PDF in a new tab?

General Questions
1

How do I enter code to display a PDF in a new window or tab instead of downloading the file? I have put ‘_blank’ in the Target field of the ‘a’ object, and I have also asked the AI assistant (who did the same thing). But testing using the view button in Pinegrow (on Safari 26.3) always leads to the file being downloaded instead of displayed. Also tried pasting the site URL into Chrome (version 145.0.7632.117), but the behavior is the same.

2

You can try adding this to your htaccess file.

This applies a header rule for handling pdf files, so the browser will just show them, not download the file.

<FilesMatch "\.pdf$">
    Header set Content-Type "application/pdf"
    Header set Content-Disposition "inline"
</FilesMatch>
1 Like
3

Thanks, Pete, for responding! Sorry, I am a bit of a newbie, so I am not sure where to find this “htaccess” file. I do not have a file with that name in my project, even under the directories that Pinegrow defines to support Tailwind. Or is this something that should go in the server? I am using the internal server on my MacBook Pro to test the page.

4

You could try using the HTML attribute onclick="window.open(...)". This should open your PDF in a new tab. Your button would look like:

<button onclick="window.open('my-doc.pdf', '_blank', 'noopener,noreferrer');">
  Button to open PDF in a new tab
</button>

@PeteSharp solution is more full proof though but requires modification of the .htaccess file on the server. Don’t forget to backup the .htaccess file before modifying :innocent:

5

Javascript can’t override the HTTP header setting. Modifying the .htaccess ensures the header is set, and it works with just a link.

It’s a hidden file in the root of your hosting.

(This is assuming you have Apache or Litespeed on your hosting)

6

OK, I see that this is a server issue that I will have to test when the site is deployed. I was simply testing it on my Mac using the “view in browser” button in Pinegrow, where (I guess) my own laptop is the server. (It’s a bit too bad that I can’t test this functionality before I actually deploy the site.)

Thanks for your help!