HTML: force PDF download - html

I've a link to a PDF file in my page.
Safari opens the pdf file directly in the website. I would like to download it instead.
I've tried to add target="_blank" to <a> element, but it doesn't work if the pop-ups are disabled in the browser settings.
How can I solve this?
thanks

To make so, you need to change headers for .PDF files.
So, in your .htaccess, you need to do like this:
AddType application/octet-stream .pdf

You need to set the Content-Disposition HTTP header to attachment for this file.
Content-Disposition: attachment; filename=test.pdf
Depending on the web server you are using the way to configure this might vary. Another option is to have a server side script which would stream the pdf and set this header.

You'll need to dynamicaly force attachement headers using a server side script like PHP.
Here's an example using PHP :
<?php
header('Content-type: application/pdf');
header('Content-Disposition: attachment; filename="downloaded.pdf"');
readfile('original.pdf');
?>
Edit :
$file = $_GET['file'];
readfile($file."pdf"); // Before doing this, check whather the user have permission to download that file.
call your script : download.php?file=document
will download document.pdf

Related

Html download a file that will be generated when the button is clicked

It seems that in html5, you can do download like this:
Download
The path_to_file will be the file you want to download. However, I need to call a back end service(like a HTTP post) first, so that the file will be generated in the first place, then I could download it.
What's the best solution to accomplish this? Adding a listener to the <a tag which triggers a call to back end?
that link should point to a endpoint that generates the file and returns it with a response header Content-Disposition: attachment; filename=your-file.whatever

Anchor tag with download attribute opens file instead of downloading

In my Reactjs application I used the anchor tag to download a txt file like below.
<a href="http://textfiles.com/......./sample.txt" download>download</a>
There I added download attribute to force it to download instead open it in the browser tab.
But it is still opening in the same tab instead of downloading. Can any one help me to solve this problem.
Looking at your example seems you're not using same origin and that might have cause the problem.
If you're trying to download the file which exists in same origin then I suggest you to use relative url rather than absolute url.
Example:
<a href="/public/sample.txt" download>download</a>
Please take a look at the note from docs:
Attribute: download
Notes:
This attribute only works for same-origin URLs.
Although HTTP(s) URLs need to be in the same-origin, blob: URLs and
data: URLs are allowed so that content generated by JavaScript, such
as pictures created in an image-editor Web app, can be downloaded.
If the HTTP header Content-Disposition: gives a different filename
than this attribute, the HTTP header takes priority over this
attribute.
If Content-Disposition: is set to inline, Firefox prioritizes
Content-Disposition, like the filename case, while Chrome prioritizes
the download attribute.
Try like this
import File from 'http://textfiles.com/......./sample.txt'; //Or the path could be any relative path to the local file.
//Other code
render() {
return(
//Code
<a href={File} download>download</a>
)
}
But inorder to use like this, you should be confident that you will get the file without any issues. Better to download the file and access it from your own directory instead of calling from another server.

Create Download Link Properly

I am new at web developing, I was trying to create download link for a file. This is the code:
<a href="http://symphonyrecords.ir/ARTISTS/Sasan-Khan-Namoondi/SasanKhan-Namoondi[320].mp3" target="_blank" download="SasanKhan-Namoondi[320]">
<button class="downBtn1">Download</button></a>
But when I click the link the file starts downloading inside the browsers not in IDM. (I have tested other links from websites and there was no problem). Should I do something in the meta tag or something ?
After one day research and strangling i found the answer ... I just add onclick method and put the file link with www inside windows.open like this :
<a onclick="window.open ('http://www.symphonyrecords.ir/ARTISTS/Sasan-Khan-Namoondi/SasanKhan-Namoondi[320].mp3', ''); return false" href="javascript:void(0);" download>
<button class="downBtn1">Download</button></a>
This is not the best answer but it will do the job
What is the server side language you have?
You need to set the below header from the server response,
Content-Disposition: attachment; filename=SasanKhan-Namoondi[320].mp3;
On the other hand, you can do the same at web server level. For an instance, if you use Apache, you can do this with .htaccess file
<IfModule mod_headers.c>
<FilesMatch "\.(mp3|MP3)$">
ForceType audio/mpeg
Header set Content-Disposition "attachment"
Allow from all
</FilesMatch>
</IfModule>
Also, you have to enable headers module to make this works,
Make sure the below is checked
Apache -> Apache Modules -> headers_module
Download
You can try this link:-How can I create download link in html?
Your code looks totally fine so it's certainly something with your browser or the download manager.
Have you tried it with another download manager?
Maybe you can give this one a try.

Inserting .txt file as html

Is there a way to insert a .txt file into a webpage and have the server/browser interpret it as html instead of just displaying the code?
I've tried using iframe as below, but that just displays the code instead of interpreting the code. I know the obvious way to do this would be to save the file as .htm and insert that file; the trouble is, my server doesn't let me upload .htm files.
<iframe src="url.txt" type="text" width="100%" style="height:1000px"></iframe>
No. In order to be interpreted by browser, it has to be sent with Content-Type: text/html HTTP herader (file extension is irrelevant by itself, but is often used by server to guess Content-Type). So if your server does not allow you to upload HTML files, you cannot do this.

Left click to download mp3

I have searched and can't find a solid answer to this question.
Is it possible to instead of right clicking and saving the file as... Can you instead code it to make it downloadable on left click and also keep it in .mp3 format?
Set the Content-Disposition header to attachment on the server side, when serving the mp3. Something like this:
Content-Disposition: attachment; filename="SloJamz.mp3"
The implementation specifics depend on what server-side language(s)/framework(s) you're using.
it depends on how your app/web server sends this data. in order to download a file directly it should be sent with a
"Content-Disposition: "attachment"
header.
add this line to your .htaccess file
AddType application/octet-stream .mp3