On click on download button I need to "GET" an xml file from rest api url (http://localhost:xxxx/xx.xml) and save it on users desktop. How do I achieve this in javascript. Thanks.
$('#your_button').click(function(){
window.open('http://localhost:xxxx/xx.xml');
return false;
});
if you have control over the webhost, send the header:
Content-disposition: attachment; filename=x.xml
You could also use AJAX call and something like the downloadify flash object. Other than these there is no native way to force the downloading of a file
Related
I am trying to download the pdf from this url :
http://www.africau.edu/images/default/sample.pdf
I followed the example and wrote the code below.
import { saveAs } from "file-saver";
const downloadPDF = ()=>{
var FileSaver = require("file-saver");
FileSaver.saveAs(
"http://www.africau.edu/images/default/sample.pdf",
"somehthing.pdf"
);
}
However, when the downloadPDF function is invoked on the button pressed. The file is not being saved. The pdf is simply being opened in the new tab.
The screenshot of what the pdf looks like in the new tab is shown below.
How do I save the pdf file?
Also, is this approach to get the pdf even valid in the first place or is axios.get() more preferred approach to get the file, then save the response file (response.body) via FileSaver.saveAs()
If the question is unclear, please let me know in the comment before flagging - I will make the necessary update. Thank you
seems like the FileSaver does not help.
However if the file is coming from the server we recommend you to first try to use Content-Disposition attachment response header as it has more cross-browser compatiblity.
as far as I know, there are 2 ways to download file in browser.
server returns a response with header Content-Disposition with value attachment or header Content-Type with value application/octet-stream. Browser will promote the SaveDialog and handle this download for you. This is preferred way to download but this requires you to have control over the server.
you just use ajax or axios to get the data of any file at anywhere. then you create a dummy link to download (like this one). then browser will promote for SaveDialog and then save file to disk. This is just fine for small file but not for large files because you have to store entire file in memory before saving it to local disk.
I think option 2 is appropriate for you.
Example here. In this example, I place a file named abc.json in public folder. Note that the server must enable cors for your website origin. otherwise, there's no way for you to access that file in javascript code.
I'm using window.location to download my image. It isn't in HTML because I generate the image on the server and then send it back down so it looks like :
window.location = data.url;
I've seen a few other questions but they suggest the download attr which I don't have because there's no HTML.
Is there a way I can change the file name?
Front-end solution
The only thing you can do on the front-end side is to change your code to HTML <a> element with download attribute:
Download
When user clicks this link, the browser forces download and saves the file with given filename. You can read more about it in this post. It's quite a new feature so check the browser support.
Back-end solution
If you can modify the server-side code then you should use content-disposition header as defined in RFC 2183.
content-disposition: attachment; filename=very_important_report.pdf
I've been wondering about it as well and saw this post but I was also using vuejs for the project and want the export to be continues even when switching from one page to another so I tried something and it did work here is another solution:
var link = document.createElement('a');
link.setAttribute('href', '<yourlink_or_data>');
link.setAttribute('download', 'filename.ext');
link.click();
You can't change the filename on the client side. You would have to do that on the server.
You could set the content-disposition header (on the server side) like this:
Content-Disposition: attachment; filename="yourname.gif"
I has a requirement like when user clicks on a download button instead of showing the content in browser, i want to save it to the localdisk(perticular location) of the user desktop. Is it possible to do??
If yes,Please help me with possibilities..
Thanks in advance
No a website can't decide where it can save something. Everything goes to download folder by default. You have to be using some sort of plugin with permissions or make like browser addon/extension.
If you want to prompt download then you could set send headers in php:
Content-Disposition: attachment; filename="fname.ext"
and
Content-Type: application/force-download
Or you could set attribute download to link in html
<a href="file.abc" download>Click Me</a>
Utility of HTTP header "Content-Type: application/force-download" for mobile?
http://en.wikipedia.org/wiki/List_of_HTTP_header_fields
http://www.php.net/manual/en/function.header.php
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#Attributes
You shall just point the file name like this to download.
But you cannot decide the path by your code.
Download the File
Note : Do not try this in jsfiddle or in codepen because they will rename the link with their custom so that the file will be displayed within their output. So, try it in your web server or in your localhost.
I need to download a file from a grid using a button in window. In order to send the filter parameters I use store.load however it doesn't download the file but it tries to read it. Is there any solution?
store.load({
params: {
startExel: parseInt(Ext.getCmp('startE').getValue())
}
});
startExel is an extra parameter in order to indicate that I want to download an Excel file.
I don't think its possible to do this by simple configuration changes. Because stores are loaded via AJAX calls.
Here is an idea for you:
Return a JSON object with file download url as the response to store load request. Not the actual file contents.
{ success = false, url='...'}
In client side handle the store load failure then identify and extract the returned url. You may have to tweak reader configuration a little.
Call window.open(url) to initiate the file download.
See this question from SO.
On the server end when returning the file include the following header:
Content-disposition: attachment
Whats the best method to prompt a user to download something? In the past I've used window.open('file.pdf'); but I can see popup blockers having a problem with this. Of course I'll include a manual link aswel.
I basically want something like the Microsoft Download page. So whats the script that prompts this?
Redirect using javascript.
function redirect() {
window.location = 'http://www.url.to/your.file';
}
Content-Disposition: attachment; filename="file.pdf"
To do this you may want to pass your file.pdf through a server script that forces that header on it.
What you see on that download page is just a location change. And if that page returns the download header the browser won't change page.
Set a content disposition header with an attachment value