How to download a text file onclick using javascript or HTML - javascript

I just want to download a .txt on click it. i am using the below html code:
Download
this code is working for .docx files not for .txt file.

You need to specify the file: protocol. Otherwise, the browser thinks that d: is a protocol name. You also need the download attribute to make it download the file instead of displaying it in the browser.
So it should be:
<a href="file:///d:/file.txt" download>Download</a>
But this seems pointless. The file d:/file.txt is already on your computer, why do you need to download it? Normally you download a file from the server to the client.

Text files are displayed in the browser when the content-type is sent as text. You should Try to send it with a different content-type or use a language such as PHP to send it as a download.

please try
Download
The download="my_text_file" attribute indicates that the target will be downloaded when clicked on the link.. and my_text_file will be new name for that file...

To expand on the answer from #barmar:
Taking the jquery question tag into consideration, check out Download File Using jQuery.
Here's the code example from that post:
$('a').click(function(e) {
e.preventDefault(); //stop the browser from following
window.location.href = 'uploads/file.doc';
});
Download now!
You can change the value assigned to window.location.href to the file you would like to download.

Try this:
<a href="d:/file.txt" download>Download</a>
It is working for me.
Cheers

Related

How do I download a file (instead of opening it) with JavaScript? [duplicate]

Is it possible to force a download through JS or Javascript i-e the web page should not open the file in new tab in the browser but to pop up to let the user to choose eith "save as" or open with ???
With the advent of HTML5 you could just use the new property download in the anchor tag.
The code will look something like
<a download="name_of_downloaded_file" href="path/to/the/download/file"> Clicking on this link will force download the file</a>
It works on firefox and chrome latest version. Should I mention that I didn't check it in IE? :P
Edited the download attribute after comment from sstur
https://caniuse.com/#feat=download
dynamic create link and click it with download attribute for force download as file:
var anchor = document.createElement('a');
anchor.href = this.props.download_url;
anchor.target = '_blank';
anchor.download = this.props.file_name;
anchor.click();
Take a notice that i didn't even added it to DOM, so it's fast.
P.S download attribute won't work with IE. But it will just open link in new tab.
http://caniuse.com/#feat=download
You can not force that behavior from JavaScript, the HTTP Headers need to be set on the server side:
Content-disposition=attachment; filename=some.file.name
The way you can solve the problem is to let your AJAX method redirect the user to the URL of the PDF:
location.replace('path/to.pdf');
(The above HTTP headers must be set for the PDF)
Update
At the time of this answer, it wasn't possible. Now it is, scroll down to see the other answer saying so.
No this is not possible with JQuery/JavaScript only.
You will need a server side script which returns you the file with a Content-Type (HTTP Header) which will force the browser to download your requested file. An possible value for Content-Type would be application/force-download.
No, it is not possible and thanks God it isn't. Otherwise I leave you to the imagination of what kind of files could be stored on your computer when you visit a web site without you knowing it.
As #Paul D. White pointed out in the comments section if you want to open the file inline (inside the browser) with the default program associated with it you could have the server send the Content-Disposition HTTP header. For example:
Content-Disposition: inline; filename=foo.pdf

Initiate file download in browser from JavaScript

I want to initiate a file download from react, such that the browser downloads it as any regular file.
When I use fetch, I can download the file and do what I want, but is not downloaded with the browsers download manager. The files are rather large, that is why I want the browser to manage the download.
I asked you if you have the full URL to the file.
If you want to start the download from a link, use the solution Kielstra provided. If you want to start the download using javascript, use the following code:
window.location = url_to_file;
If you have the URL to the file that you want to be downloaded, you can simply create a link to it with the download attribute.
<a href="link_to_file" download>Download</a>

Downloading File After Renaming Using HTML Or JavaScript

I want to download file from external server but after renaming it. Let's say http://playtictactoe.atwebpages.com/logo.png is an image file I want to download. I have used the following HTML:
<a href="http://playtictactoe.atwebpages.com/logo.png" download="myName.png">
Download File
</a>
But this doesn't rename the file. I've read somewhere that this is because of Response Header on server. Is there any way to ignore Response Header on client side? Else guide me any other solution.
You can download the file as a buffer and resave with the file api like descriped here:
HTML5 File API downloading file from server and saving it in sandbox
Or lookup FileAPI and XMLRequest to Buffer. You download the file as binaryBuffer save it with fileAPI and rename it. This should also work in Firefox. But this is not the simple solution you are searching for. Even though it works ;-)
You can then rename the file like you want.
Cheers

How to download a file from dropbox using Javascript

I have a pdf file stored in dropbox. I have an URL to access that pdf file. The format of the URL is something like this https://www.dropbox.com/s/myPDF.pdf.
Now I need to use this URL in my angular application to download that PDF file and show it's content.
I need to display the pdf in the same webpage as my application. I used tag for achieving this. But I got the error saying Refused to display the pdf in a frame because it set 'X-Frame-Options' to 'SAVEORIGIN'.
I am new to dropbox. I need to know how to download this pdf and show it's content in my angular application by using the URL given above.
I understand your problem buddy. You dont need javascript for this, it can be done with simple and "anchor" tags.
Write the code as follows:
<a href="https://www.dropbox.com/s/myPDF.pdf">
<button>Download pdf</button>
</a>
Now, when the user clicks the button, the file will be downloaded.

Is there any way to suggest a file name with a data URI?

I am using data attribute to simulate a file download from client-side JavaScript. Here's my source code :
var data = "data:application/text,anything is here";
window.location.href = data;
This works perfectly and simulates a file download. Is there any way I can specify the file name as well, as a part of the data URI or by using some other facility available from the browser?
I am aware of the download attribute of <a> tags, but I was wondering if there are any options other than the default which is to use the value of data itself as the suggested file name.
I don't believe there is a way of doing it when you are redirecting the browser like that.
If you were instead provide the download via link you could use the download attribute to suggest a filename. Not all browsers support the download attribute` at this time.

Categories

Resources