I have been trying to download a text file with javascript. I'm using this code:
HTML:
<a id="save_file_local" download="data.local">Save file</a>
Javascript:
save_file_local.href="data:text/plain,"+encodeURIComponent(response);
save_file_local.click();
Well, it works perfect with all extensions I have used.. but only with ".local" extension, I get a file with this name: data.download
I really need to download the ".local" file, so to change of extension is not a solution for me.
It works perfectly with Internet Explorer 10, but not with Chrome or Mozilla.
I have been searching without luck... so Thanks for your help!
From an alternate question:
<a href="path/to/file" download>Click here to download</a>
Thought no way to do this completely cross browser apparently.
This depends on your browser and on the Server.
If a Server sends the "Content-type: text/plain" the most browsers will display it. Its nothing you can change with javascript.
As evu suggested, you could use the HTML5 download attribute, although it isn't widely or consistently supported yet. Chrome give priority to the download attribute, but Firefox gives priority to the http header Content-Disposition. However, if it's content you generated in JavaScript, then the download attribute should work.
If you've got access to the server, setting Content-Disposition: attachment; in your http header would be a much better solution.
Related
The code has to download a file but it opens the file .What I am doing wrong ?
<html>
<body>
<p>Click on the Image to download the image:<p>
<a href="/website/image1.jpg" download>
<img src="/website/image1.jpg" alt="Image" width="104" height="142">
</a>
</body>
</html>
The above code opens the file and doesn't download.
This attribute only works for same-origin URLs.
If/when you start hosting it on a web server, this will start working. If you're just doing this for yourself on your computer, check out WAMP for Windows or MAMP for macOS to get started with Apache. research link
So simple solution regarding this issue. You just need to put your html file into a server.
Try adding
<!DOCTYPE html>
to the top of your file, for letting your browser know that you are using HTML5.
The download attribute is not totally supported by browsers, take a look at https://caniuse.com/#feat=download.
To be sure that browser will offer user to save file instead of opening it inside the browser window you should serve image from the server with content-type set to application/octet-stream.
The proper way to set header depends on backend technology stack you use.
Probably the easiest way to do it is to check the request at web server layer and then add header. For example, the config for nginx could be something like that:
location ~* .\?download$ {
add_header Content-Type application/octet-stream;
}
This should open image.jpg in browser as usual, but image.jpg?download should offer user to save it.
The syntax of config file should be checked, I'm not very sure about it.
The code looks fine to me.
But, please remind that download attribute its not supported in Edge version 12, IE, Safari 10 (and earlier), or Opera version 12 (and earlier).
Edit: Maybe it's because of the declaration of an HTML document missing.
<html>
<body>
<a href="https://www.google.com.ua/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" download> download</a>
</body>
</html>
Hello! Any suggestions to force save-as dialogue for image w/o .htaccess?
This is a browser (chrome ? ) feature.
Your users may configure it as they wish.
Neither you nor even FileSaver.js can do anything about it...
Adapted from the post:
force browser to download image files on click
Since the html5 'download' attribute will still only work for compliant browsers.
(As per #RichardParnaby-King's answer)
You can try:
var link = document.createElement('a');
link.href = 'images.jpg';
link.download = 'Download.jpg';
document.body.appendChild(link);
link.click();
(Thanks to #DrowsySaturn's answer)
It's also worth mentioning that since it's JS, some older browsers won't support this.
Since browsers each have their own way of handling links, generally browsers will aim to display an image if specified by a URL on an tag and not automatically download them. This is aimed to be rectified with the download attribute in HTML5 but obviously some browsers wouldn't have yet implemented (and some may never).
PS: Try search for your question first to prevent duplicates!
The most reliable approach is to force it on the server side.
For your convenience, the browser will automatically handle particular content in specific ways. In particular, the browser will automatically handle an image by displaying it inline, which is what you are trying to avoid.
How does the browser know that it’s an image, as opposed to some other content. The server sends a header to say so. In the case of png image, the server sends something like this:
Content-Type: image/png.
The trick is to get the server to also send a preferred method of handling the content. In your case you need a header like this:
Content-disposition: attachment; filename=…
This will tell the browser to download it.
A simple PHP script to do this would be something like this:
// assuming png
$filename=#_GET['filename'];
$data=file_get_contents($filename);
header("Content-disposition: attachment; filename=$filename");
header('Content-type: image/png');
print $data;
Solved by #Kaiido's comment:
This is a browser (chrome ? ) feature. Your user may configure it as
he wishes. i.stack.imgur.com/BvOD8.png And even FileSaver.js can't do
anything about it...
Most chrome-based browsers (Opera in my case) has this option enabled by default.
I almost feel ashamed to ask such a basic question, what with how i like to term my self a website genius when with friends this seems quite basic.
I'm trying to get visitors to my site to download an mp3 link=> "http://www.podbean.com/podcast-directory-download-public/4995714/10_Commandments_Of_A_Successful_Home_Pst_Abiodun_Koloewo.mp3". But the problem i'm facing is that it won't download unless one right clicks and selects "save link as" and i can't do anything about it since the file's not on my server. any help here?
You have two methods, one of which only works in Chrome.
Use the download attribute:
Though this is used in Firefox, it states:In Firefox 20 this attribute is only honored for links to resources with the same-origin. so it doesn't work.
Example:
<a href="http://www.podbean.com/podcast-directory-download-public/4995714/10_Commandments_Of_A_Successful_Home_Pst_Abiodun_Koloewo.mp3" download>Download Song</a>
Use your server as a proxy:
Example:
header('Content-Type: application/octet-stream');
header("Content-Transfer-Encoding: Binary");
header("Content-disposition: attachment;filename=\"10_Commandments_Of_A_Successful_Home_Pst_Abiodun_Koloewo.mp3\"");
readfile("http://www.podbean.com/podcast-directory-download-public/4995714/10_Commandments_Of_A_Successful_Home_Pst_Abiodun_Koloewo.mp3");
For this example to work, please enable allow_url_fopen.
In addition to this, I would recommend saving the song file on your server, so that new requests for this song can just be downloaded from your server again.
I have a standard file upload script using this script. When the upload is completed, I send back a JSON telling the client that the upload went OK, something like this:
{done: true, error: "No error"}
When I do the upload on Firefox, everything works out smoothly, but on IE9 / Chrome it breaks. IE tells me that I need to download the file, something like this image:
I thought that the issue was the headers submitted to the client and I tried setting the content type to:
application/javascript
text/javascript
The files are stored properly and the answer is coming back without any corruption, nor in the encoding, or gzipped or anything like it.
Any ideas?
EDIT: Forgot to add the link on the "this" and also, it's an older version of the plugin, not the current one.
I'll reply the question myself because I've found a solution, at least it works...
Thing is that when sending a request using an iframe, seems that the content type of the response shouldn't be either application/json or application/javascript or any other like it. My solution was to send the response as text/html, and do a JSON.parse on the client, and it works like a charm.
Since I all of my Ajax calls specify that I expect a JSON, it works ok when I make ajax calls as well, because jQuery handles the whole conversion, only thing that worries me is any problem related to performance on the client, but I see no signs of problem just yet...
Hope that anybody that runs with the problem may find my answer helpful!
I had this problem with the same upload widget and IE 8 in the past.
header('Content-Type: application/json') fixed it for me. Did you try this as well?
I have an HTML string in javascript variable. I have to save/Download the string as a file on link click. It should be cross browser compatible.
I thought window.open with attachment Content-Disposition header, but not good solution because popup may be blocked.
As mentioned here, you could use downloadify: https://github.com/dcneiner/Downloadify. The client will need flash though.