How do I force files to open in the browser instead of downloading (PDF)?

Question

Is there a way to force PDF files to open in the browser when the option "Display PDF in browser" is unchecked?

I tried using the embed tag and an iframe, but it only works when that option is checked.

What can I do?

score 465 · Answer 1 · edited Aug 28 '19 at 13:00

465

To indicate to the browser that the file should be viewed in the browser, the HTTP response should include these headers:

Content-Type: application/pdf
Content-Disposition: inline; filename="filename.pdf"

To have the file downloaded rather than viewed:

Content-Type: application/pdf
Content-Disposition: attachment; filename="filename.pdf"

The quotes around the filename are required if the filename contains special characters such as filename[1].pdf which may otherwise break the browser's ability to handle the response.

How you set the HTTP response headers will depend on your HTTP server (or, if you are generating the PDF response from server-side code: your server-side programming language).

edited Aug 28 '19 at 13:00

Quentin

800,325
104
1,079
1,205

answered Aug 10 '12 at 02:45

ColinM

11,946
2
38
45

13

To force download I rather use Content-Type: application/octet-stream. – Papick G. Taboada Jan 07 '13 at 12:54
27

@PapickG.Taboada but then the user's system may not know the file type. E.g. some user's may have opted to "Always open files of this type" for PDF files. Perhaps if you want to override the user's preferences then octet-stream would be the way to go, but giving the correct type and a suggested filename is the "correct" way to provide a download. – ColinM Jan 16 '13 at 04:30
2

hi @ColinM I am a bit confused here... we are having issues rendering the pdf, it just gives a scrambled text. where do we set the Content-Type: application/pdf Content-Disposition: inline; "filename.pdf"? 'cos, we upload it using angular-js code. So my question is should the content type be set before uploading? And also, we get only a link from the backend team, a url that gives the file path, that we open in new tab using:window.open(url, '_blank').focus(); – Kailas Dec 17 '14 at 12:21
3

@Kailas I don't understand what you're trying to do.. The answer is referring to the headers that a server should send to a client when responding to an HTTP request for the PDF file. These headers have no effect on a file upload, you need to have the code behind the url set the headers every time it is downloaded by the client. – ColinM Dec 18 '14 at 18:58
1

@ColinM Thanks buddy, you said it right, the issue when we debugged was the mime type was set while uploading the files. This should be done by the back-end team. I tried to get codes on how to add headers in java script but was not successful. Thanks, as I got the real idea cleared from you... :) – Kailas Dec 19 '14 at 07:19
Not working for me. I set Content-Type and Content-Disposition from the server. Opened file using URL, the browser is still asking to download and not opening in the browser. – Pankaj Shinde Jul 26 '19 at 06:55
where can I set this Content-Type, help, please ? – Ilia Tapia Aug 28 '19 at 13:08
@IliaTapia — See the last paragraph of this answer. – Quentin Aug 28 '19 at 19:24
Worked for me - for those using PDF's in S3 with a presigned URL i needed to set the meta data of the object IN S3 to be application/pdf. Then it was a simple as using an embed tag with the URL `````` – Julian Nov 20 '20 at 18:40

score 16 · Answer 2 · edited Mar 28 '18 at 18:59

The correct type is application/pdf for PDF, not application/force-download. This looks like a hack for some legacy browsers. Always use the correct mimetype if you can.

If you have control over the server code:

Forced download/prompt: use header("Content-Disposition", "attachment; filename=myfilename.myextension");
Browser tries to open it: use header("Content-Disposition", "inline; filename=myfilename.myextension");

No control over the server code:

Use the HTML5 download attribute. It uses the custom filename specified on the view side.

NOTE: I prefer setting the filename on the server side as you may have more information and can use common code.

score 15 · Answer 3 · edited Mar 28 '18 at 18:56

15

If you are using HTML5 (and I guess nowadays everyone uses that), there is an attribute called download.

For example,

<a href="somepathto.pdf" download="filename">

Here filename is optional, but if provided, it will take this name for the downloaded file.

edited Mar 28 '18 at 18:56

Peter Mortensen

28,342
21
95
123

answered Oct 01 '14 at 10:00

Akshay

2,876
3
31
65

2

If you have control over the server code you should use 'attachement' as this will allow to use the same filename generation code. If you have no control over the server this is a good solution. – Christophe Roussy Feb 04 '15 at 13:53
This is a brilliant solution to the problem however, as always, IE is holding us back from using it: http://caniuse.com/#search=download – Rory McCrossan Dec 05 '16 at 08:03
Well, the 'edge' supports it, however 'safari' does not. Ref http://www.w3schools.com/tags/att_a_download.asp – Akshay Dec 05 '16 at 10:28
1

Important to note that this does not work across domains (e.g., same-origin policy gets in the way). If downloading from one domain, the download attribute will not work if content is stored on a different domain. CORS may allow that content to pass through (haven't tested). – vol7ron Jan 30 '17 at 23:21
84

This is literally the opposite of what the OP is asking :) – Chuck Le Butt Apr 03 '17 at 10:14
1

Yes figured! :\ I understood the question wrong and answered. But many people lands here finding the opposite only, that's why not edited/removed the answer. – Akshay Apr 03 '17 at 10:51

score 1 · Answer 4 · edited Nov 22 '14 at 21:54

Oops, there were typing errors in my previous post.

    header("Content-Type: application/force-download");
    header("Content-type: application/pdf");
    header("Content-Disposition: inline; filename=\"".$name."\";");

If you don't want the browser to prompt the user then use "inline" for the third string instead of "attachment". Inline works very well. The PDF display immediately without asking the user to click on Open. I've used "attachment" and this will prompt the user for Open, Save. I've tried to change the browser setting nut it doesn't prevent the prompt.

5

What previous post? – Peter Mortensen Mar 28 '18 at 18:57

score 1 · Answer 5 · edited Mar 28 '18 at 19:08

1

If you have Apache add this to the .htaccess file:

<FilesMatch "\.(?i:pdf)$">
    ForceType application/octet-stream
    Header set Content-Disposition attachment
</FilesMatch>

edited Mar 28 '18 at 19:08

Peter Mortensen

28,342
21
95
123

answered Aug 11 '15 at 10:20

Alexander

45
1
4

how can we add multiple extensions? I want to add DOC and XLS extension also. Kindly suggest me. Thanks in advance. – Kamlesh May 30 '19 at 15:06
5

That does the opposite to what is asked for – Quentin Aug 28 '19 at 12:31

score 0 · Answer 6 · answered Nov 29 '16 at 11:05

This is for ASP.NET MVC

In your cshtml page:

<section>
    <h4><a href="@Url.Action("Download", "Document", new { id = @Model.GUID })"><i class="fa fa-download"></i> @Model.Name</a></h4>
    <object data="@Url.Action("View", "Document", new { id = @Model.GUID })" type="application/pdf" width="100%" height="800" class="col-md-12">
        <h2>Your browser does not support viewing PDFs, click on the link above to download the document.</h2>
    </object>
</section>

In your controller:

public ActionResult Download(Guid id)
    {
        if (id == Guid.Empty)
            return null;

        var model = GetModel(id);

        return File(model.FilePath, "application/pdf", model.FileName);
    }

public FileStreamResult View(Guid id)
    {
        if (id == Guid.Empty)
            return null;

        var model = GetModel(id);

        FileStream fs = new FileStream(model.FilePath, FileMode.Open, FileAccess.Read);

        return File(fs, "application/pdf");
    }

score 0 · Answer 7 · answered May 11 '20 at 13:55

While the following works well on firefox, it DOES NOT work on chrome and mobile browsers.

Content-Type: application/pdf
Content-Disposition: inline; filename="filename.pdf"

To fix the chrome & mobile browsers error, do the following:

Store your files on a directory in your project
Use the google PDF Viewer

Google PDF Viewer can be used as so:

<iframe src="http://docs.google.com/gview?url=http://example.com/path/to/my/directory/pdffile.pdf&embedded=true" frameborder="0"></iframe>

score -4 · Answer 8 · edited Dec 04 '15 at 17:18

Open downloads.php from rootfile.

Then go to line 186 and change it to the following:

        if(preg_match("/\.jpg|\.gif|\.png|\.jpeg/i", $name)){
            $mime = getimagesize($download_location);
            if(!empty($mime)) {
                header("Content-Type: {$mime['mime']}");
            }
        }
        elseif(preg_match("/\.pdf/i", $name)){
            header("Content-Type: application/force-download");
            header("Content-type: application/pdf");
            header("Content-Disposition: inline; filename=\"".$name."\";");
        }

        else{
            header("Content-Type: application/force-download");
            header("Content-type: application/octet-stream");
            header("Content-Disposition: attachment; filename=\"".$name."\";");
        }

No mention that they use PHP. What if their backend is in Python or .NET? — Maxime Rouiller, Dec 04 '15 at 16:18
... talk about out of left field. He doesn't even say what framework he's talking about. — Archonic, Jun 02 '18 at 23:31

score -5 · Answer 9 · edited Mar 28 '18 at 18:55

-5

You can do this in the following way:

<a href="path to PDF file">Open PDF</a>

If the PDF file is inside some folder and that folder doesn't have permission to access files in that folder directly then you have to bypass some file access restrictions using .htaccess file setting by this way:

<FilesMatch ".*\.(jpe?g|JPE?G|gif|GIF|png|PNG|swf|SWF|pdf|PDF)$" >
    Order Allow,Deny
    Allow from all
</FilesMatch>

But now allow just certain necessary files.

I have used this code and it worked perfectly.

edited Mar 28 '18 at 18:55

Peter Mortensen

28,342
21
95
123

answered Nov 09 '12 at 10:33

Mohsin

7
2

No mention that they use Apache. What if they use IIS? Or Express? – Maxime Rouiller Dec 04 '15 at 16:19

score -6 · Answer 10 · edited Mar 28 '18 at 19:04

Here is another method of forcing a file to view in the browser in PHP:

$extension = pathinfo($file_name, PATHINFO_EXTENSION);
$url = 'uploads/'.$file_name;
        echo '<html>'
                .header('Content-Type: application/'.$extension).'<br>'
                .header('Content-Disposition: inline; filename="'.$file_name.'"').'<br>'
                .'<body>'
                .'<object   style="overflow: hidden; height: 100%;
             width: 100%; position: absolute;" height="100%" width="100%" data="'.$url.'" type="application/'.$extension.'">
                    <embed src="'.$url.'" type="application/'.$extension.'" />
             </object>'
            .'</body>'
            . '</html>';

`header` doesn't work after you're started outputting the request body (and it doesn't return a string for concatenating in an HTML document) — Quentin, Aug 28 '19 at 12:33

score -8 · Answer 11 · answered Apr 25 '12 at 05:06

-8

Either use

<embed src="file.pdf" />

if embedding is an option or my new plugin, PIFF: https://github.com/terrasoftlabs/piff

answered Apr 25 '12 at 05:06

Gabriel Ryan Nahmias

2,039
1
22
39

score -11 · Answer 12 · edited Mar 28 '18 at 19:07

-11

Just open Adobe Reader, menu → Edit → Preferences → Internet, then change to browser mode or for detailed instructions on different browsers try Display PDF in browser | Acrobat, Acrobat Reader.

edited Mar 28 '18 at 19:07

Peter Mortensen

28,342
21
95
123

answered Apr 23 '15 at 09:33

lawl

1

3

What if you don't use AdobeReader or don't use windows ? You're answer will not work. Moreover, it require asking the user to change their setting, which you can't do in real world. – Clawfire Jul 13 '16 at 15:38

score -13 · Answer 13 · answered Jun 09 '11 at 13:56

-13

If you link to a .PDF it will open in the browser.
If the box is unchecked it should link to a .zip to force the download.

If a .zip is not an option, then use headers in PHP to force the download

header('Content-Type: application/force-download'); 
header('Content-Description: File Transfer');

answered Jun 09 '11 at 13:56

Kirk Strobeck

15,873
14
70
107

Yes, but I need a way to force to open in browser not to download. I have no idea if its possible. – elloalisboa Jun 09 '11 at 13:59
2

If you aren't forcing it to download, then you ARE forcing it to open in the browser. If it won't open in the browser, it's because the user has specific setting, which you can't override or they don't have PDF reading software. – Kirk Strobeck Jun 09 '11 at 14:00
21

This is wrong. There is no application/force-download. You can use alskjdsdjk/aljksdlasdj as well. The browser will download because it does not know this mime-type. The right mime-type for download would me application/octet-stream – Papick G. Taboada Jan 07 '13 at 12:52

How do I force files to open in the browser instead of downloading (PDF)?

13 Answers13

Linked

Related