Force to open "Save As..." popup open at text link click for PDF in HTML

I have some big size PDF catalogs at my website, and I need to link these as download. When I googled, I found such a thing noted below. It should open the "Save As..." popup at link click...

 <head>
    <meta name="content-disposition" content="inline; filename=filename.pdf">
    ...

But it doesn't work :/ When I link to a file as below, it just links to file and is trying to open the file.

    <a href="filename.pdf" title="Filie Name">File name</a>

UPDATE (according to answers below):

As I see there is no 100% reliable cross-browser solution for this. Probably the best way is using one of the web services listed below, and giving a download link...

http://box.net/
http://droplr.com/
http://getcloudapp.com/

Solution 1:

From an answer to Force a browser to save file as after clicking link:

<a href="path/to/file" download>Click here to download</a>

Solution 2:

Use the download attribute, but take into account that it only works for files hosted in the same origin that your code. It means that users can only download files that are from the origin site, same host.

Download with original filename:

<a href="file link" download target="_blank">Click here to download</a>

Download with 'some_name' as filename:

<a href="file link" download="some_name" target="_blank">Click here to download</a>

Adding target="_blank" we will use a new Tab instead of the actual one, and also it will contribute to the proper behavior of the download attribute in some scenarios.

It follows the same rules as same-origin policy. You can learn more about this policy on the MDN Web Doc same-origin policy page

You can lern more about this download HTML5 attribute on the MDN Web Doc anchor's attributes page.

Solution 3:

Meta tags are not a reliable way to achieve this result. Generally you shouldn't even do this - it should be left up to the user/user agent to decide what do to with the content you provide. The user can always force their browser to download the file if they wish to.

If you still want to force the browser to download the file, modify the HTTP headers directly. Here's a PHP code example:

$path = "path/to/file.pdf";
$filename = "file.pdf";
header('Content-Transfer-Encoding: binary');  // For Gecko browsers mainly
header('Last-Modified: ' . gmdate('D, d M Y H:i:s', filemtime($path)) . ' GMT');
header('Accept-Ranges: bytes');  // Allow support for download resume
header('Content-Length: ' . filesize($path));  // File size
header('Content-Encoding: none');
header('Content-Type: application/pdf');  // Change the mime type if the file is not PDF
header('Content-Disposition: attachment; filename=' . $filename);  // Make the browser display the Save As dialog
readfile($path);  // This is necessary in order to get it to actually download the file, otherwise it will be 0Kb

Note that this is just an extension to the HTTP protocol; some browsers might ignore it anyway.

Solution 4:

I had this same issue and found a solution that has worked great so far. You put the following code in your .htaccess file:

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

It came from Force a File to Download Instead of Showing Up in the Browser.

Solution 5:

I found a very simple solution for Firefox (only works with a relative rather than a direct href): add type="application/octet-stream":

<a href="./file.pdf" id='example' type="application/octet-stream">Example</a>