Joomla 3.3 anchor does not download a uploaded pdf - html

I my joomla website I have a anchor that points to a uploaded pdf like this
STUFF
When I click it, the file does not download. However, if I "copy link address" and paste it in the address bar, it already works.
What is the cause of this? Some joomla limitation?

The way a link to a PDF is handled is often determined by the browser and the presence of plugins for PDF's. Most browsers handle them inline, i.e. they display them in the page.
Given that you're already using the HTML5 download attribute, it may be that your webpage or browser are the issue or the server configuration. Also wiht the combinations of browsers, plugins etc you may not be able to guarentee the same result across all users.
Things you can try, include:
Setting a target="_blank" on the <a href> tag (not strictly necessary but it will stop the user from leaving the page).
setting various headers on the PDF files (e.g. via .htaccess if you're using Apache)
For example you could add this to your .htaccess
<FilesMatch "\.pdf$">
AddType application/octet-stream .pdf
Header set Content-Disposition attachment
</FilesMatch>

Related

How to force <a download> to download a file while having a content disposition inline header

Update: I have concluded that this is a firefox issue. Chrome, Chromium Edge and Safari all work well with my solution. I have created a bug on the firefox bugtracker: https://bugzilla.mozilla.org/show_bug.cgi?id=1658877
I have a front-end that can download a file in 2 ways:
Click button 1 to open the file in the browser
Click button 2 to download the file to the hard drive
The way this works in the front-end is by using the <a download="FILENAME.EXTENSION"> tag and attribute for forcefully downloading the file, and to use <a> (without download) to make it open in the browser.
This works because the API never returns a content-disposition header (We use ASP.NET Core's File() method without the fileName parameter, which doesnt add a content-disposition header in this case) so the download attribute ensures it is downloaded.
Please read the background information before continuing
To try the fix the mentioned background information's issue, I changed our API to always return the following header for a file:
content-disposition: inline; filename=FILENAME.EXTENSION.
My idea is that the browser should open the file in the browser. if this is not possible, it will open a download pop-up and use the filename bit of the content-disposition header to give it a correct name. If it can open the file in the browser but the user pressed the download button, the <a download> should have higher priority and download.
The problem is that when using the <a download> way of downloading, that it STILL tries to open the file in the browser. I can understand why, but I would rather that it would respect the download attribute. I am using Firefox and the front-end and back-end run on the same domain!
Any clues?
For some background info:
We use ASP.NET Core 2.0. And if you use the built-in BaseController.File() method WITH the fileName parameter, it FORCES the attachment bit in a content-disposition header which makes it always download the file. We do not want that, so we used the variant of File() without specifiying a filename, which would not add a content-disposition header; this worked fine...
UNTIL we had to support MS word and MS excel files. When trying to use option 1, the user gets a pop-up like this:
As you can see, the filename is missing because the browser is not sending it in the content-disposition header. And I can't use the download attribute to specify it, because I pressed option 1 which means the file should be opened in the browser. If the file would be a PNG, it would then be forced to download.
At this point, I tried using inline;filename="FILENAME.EXTENSION as my content-disposition header, but this takes priority over the <a download> bit, defeating the purpose.
I can come up with 2 workarounds:
MS Word and MS Excel files must have a attachment bit in their content-disposition header so I can specify the filename and they download to disk, even if you tried opening it directly in browser.
But this isn't pretty; if some user would not have image/pdf support and downloaded an image or PDF file, my issue would still exist because the filename would be download again...
Have a download queryparam with the value 0 or 1 that specifies if the file should be downloaded with a INLINE or ATTACHMENT content-disposition header.
this might, compared to my current situation, be prettier, perhaps. but it is more work, and I wish that <a download> could just work.

PDF file not downloading with HTML5 download attribute

I have a download attribute on two different anchor tags. One is for an Excel file and one for PDF. The Excel file downloads. The PDF opens in new tab instead. Why is this happening? Code below:
<div class="col-2 center">
<a download href="files/excel-sample.xlsx">
<img src="img/excel-logo.png" />
</a>
</div>
<div class="col-2 center">
<a download href="files/pdf-sample.pdf">
<img src="img/pdf-logo.png" />
</a>
</div>
Download Basics
So essentially what is happening is that when you link to a file URL, the browser opens that URL and if it has accessibility to display the content, it almost always will. Some most common examples of this are image files (.png, .jpg, etc...). However, if the browser can't read the file type (.zip) then it will almost always download the content. A great way to force the browser to download the file is by adding the download attribute in the <a> tag.
PDFs are readable and accessible by most modern browsers so by default, the browser is set to open the file instead of download it. Because of this accessibility, most modern browsers have introduced settings that allow users to decide on a machine by machine basis whether or not a PDF (or any other readable file) should open in another window or download by default. In many cases, even with the download attribute, the browser can still decide for itself how to handle the file.
Possible Solutions
1 - If you are just trying to achieve the download functionality on your browser only (which it looks like you aren't but I thought I should include anyway), you can open chrome, go to Settings -> Advanced Settings -> Content Settings -> PDF Documents -> Toggle on Download
2 - You can compress and zip the file so the browser is forced to download the file.
3 - If you have root server access to your site and it is using Apache, you can add the following to your .htaccess
ForceType application/octet-stream
Header set Content-Disposition attachment
If you are using an NGINX web server, you can add the following redirect
location ~* (.*\.pdf) {
types { application/octet-stream .pdf; }
default_type application/octet-stream;
}
So the solution is:
<a href="pdf-sample" download="pdf-samle.pdf">
Note that "href" has a value without the .pdf reduction, but "download" has a value with the .pdf reduction. Remember you also have to remove the .pdf reduction from the targeted file. As it seems the browser treats the downloaded file as a non pdf file and therefore is not opening it by default.
you cannot use <a download href="files/pdf-sample.pdf">
but you can use <a href="files/pdf-sample.pdf"> for preview your file

How can I make a url a download link in html?

A client wants a url to be a download link.
Use case is like so:
user gets linked to example.com/download once there, it downloads a pdf file.
Can I do this without php ?
HTML5 introduced the download attribute.
Supporting user-agents will offer to download the file foo.png when clicking this link:
<a href="foo.png" download>Save the image</a>
You can also specify a different default file name that should be used:
<a href="foo.png" download="image.png>Save the image</a>
Read more at http://www.w3.org/TR/html5/links.html#downloading-resources.
Note that this only works for links. When users enter the URL directly into their browsers, this will have no effect, of course. If you want that, you need to send specific HTTP headers. See for example the question: How to force download of a file?. You don’t necessarily need a programming language like PHP for that. You can do it with, for example, .htaccess, too: Force File(image) Download with .htaccess
How a file is displayed is browser specific. Some may force you to download while some directly render it on the browser.
If you want to force the browser to download the file then you can set in Header the
Content-Type : application/octet-stream
You only need a link (anchor tag). The way the link behaves on click will depend on what browser you are and what settings you have in that particular browser. Some browsers will prompt you to open or save the file, other browsers will open the PDF file on a new tab or window.
Download PDF
You'll also need to make sure that the path to the PDF file is correct on the href property of your anchor tag.
Use this (HTML) not PHP:
Download pdf
Use the full url including the pdf file like.
Download

Display favicon for PDF files

I am working on a Drupal site with some PDF files where I am opening a PDF file in a new window. The files are getting opened in the browser with the Acrobat Reader plugin but the favicon is not getting displayed. What should be done to show the favicon?
If you put a favicon.ico to the root of your site, then your PDFs opened on that site will actually have that favicon. You can generate transparent ICOs from PNGs with online favicon genereators.
For example, if your favicon is reachable in:
http://example.com/favicon.ico
Then your PDF will show this favicon in the Acrobat plugin tab:
http://example.com/something/something.pdf
If you show the PDF file in an iframe, the browser should show the site-wide favicon, but you're out of luck in an external applications. Acrobat Reader doesn't use Favicons.
UPDATE This is now possible by placing favicon.ico in the root directory of your website as per #s1m0n1stv4n answer below
In the Drupal root directory, edit the .htaccess file and add this:
RewriteRule ^favicon.ico sites/%{SERVER_NAME}/favicon.ico [NC,L]
Exactly as it is typed there, and right after the RewriteBase line near the bottom.
See caveats here:
http://drupal.org/node/174940#comment-852888
This assumes you have friendly URLs working in Drupal, or the RewriteRule will be useless.
In each sites/example.com/ directory, add the favicon.ico for that site.
Jump through hoops to clear your favicon cache in your browser / OS:
http://www.faviconblog.com/clear-the-browser-cache-to-display-your-favicon/
This MAY over-ride the HTML HEAD favicon that Drupal spits out when you upload one in some browsers, or not. Haven't tested. If it does, you'll have to have a favicon.ico for every sites/XYZ/
Note that just because uploaded HEAD favicon overrides the sites/XYZ/ in one browser, is no indication it will work in another, or vice versa.
Displaying the PDF from <iframe>, <object>, or maybe even <embed> tag inside of an HTML page should result in the favicon being used.

Preventing playing an MP3 file using an HTML anchor

How do you make an MP3 link download instead of play "in-browser"?
I tried changing the target to blank, but that just opened the player in a new window.
You can't do this by modifying the link. You will have to have the HTTP server that serves the file send a Content-Type of "application/octet-stream". Presumably it is sending the type "audio/mpeg", which is hinting to the browser that it is MP3 content. Without the capacity to alter this header, you can't achieve this.
If your server supports PHP, create a PHP script called "getfile.php" (or similar) that takes a parameter of a file ID or file name. Set the content-type and content-disposition headers within the script to force a download prompt.
See: http://webdesign.about.com/od/php/ht/force_download.htm
Lots of solutions here. Here's the basic idea:
Use Javascript to make a (ajax) request to the server
When the request is received, run a script
This script redirects your browser temporarily to a new page
The new page has a few headers telling your browser to expect a file attachment, and what kind of attachment it is
The "save as" dialog pops up and your original page is still onscreen
I could be wrong, but I've seen people with the same problem before just with other file types, they used the code below:
<FilesMatch "\.(?i:mp3)$">
ForceType application/octet-stream
Header set Content-Disposition attachment
</FilesMatch>
Hope this works for you!
For quite some time (Chrome 14+, Firefox 20+, Edge 44+) it is possible to use the download attribute on same-origin links to force download behavior even when the server doesn't supply a Content-Disposition header on the link target.
Without access to the server generating the HTTP responses, the browser gets to decide what to do with different types of responses. usually the only files a browser will download are things like .zip files which it cannot display.