I don't have much JS experience but thought this should be fairly simple - still, can't get it to work.
I need to download a file from an external server (AWS - no authentication, just plain url) when a web page loads (no clicks).
Would have been nice to just use the HTML5 'download' attribute - but doesn't work in this case.
So, have tried various JS code snippets I found.
Closest I got was:
function downloadFile(url, fileName){
fetch(url, { method: 'get', mode: 'no-cors', referrerPolicy: 'no-referrer' })
.then(res => res.blob())
.then(res => {
const aElement = document.createElement('a');
aElement.setAttribute('download', fileName);
const href = URL.createObjectURL(res);
aElement.href = href;
// aElement.setAttribute('href', href);
aElement.setAttribute('target', '_blank');
aElement.click();
URL.revokeObjectURL(href);
});
}
downloadFile('https://www.google-analytics.com/analytics.js', 'gooleAnalytics.js')
While this looks like it is working it actually downloads an empty file.
Ideas?
Cheers.
Trying to download a remote file on page load.
Resulted in empty file being downloaded.
Since you're using fetch in no CORS mode here, you won't be able to read the response of it, which is why the download is blank. Looking at the URL you provided, it doesn't send an Access-Control-Allow-Origin header so you won't be able to request it in the normal way. In order for it to work, you'll need to use a CORS proxy, use the iframe hack Albert Logic Einstein mentioned, or just have people right click save link as.
Related
I am using JQuery to send an AJAX request to a Node server (using Hapi). The server responds with a PDF file correctly, but I am trying to save the file locally. The catch is that the PDF should only return if the POST sent the right data. It's "protected" in other words and I don't want to just expose it publicly.
Frontend code:
$.get('http://localhost:3000').done(function (data) {
console.log(data);
});
Backend code:
server.route({
method: 'GET',
path: '/',
handler: async (request, h) => {
return h.file('./static/sample.pdf', {
mode: 'attachment',
filename: 'sample.pdf'
})
}
});
I receive the data but nothing happens in the front-end UI. How can I download the PDF that is sent automatically?
You can achieve that with html5 using
Download it!
Notice that this works only for same-origin URLs, or the blob: and data: schemes. And this gets overridden by the Content-Disposition header from the server.
If you want to do this programatically you could do this
const element = document.createElement("a")
element.setAttribute(
"href",
// you could also use base64 encoding here like data:application/pdf;base64,
"data:text/plain;charset=utf-8," + encodeURIComponent('pdf binary content here')
)
element.setAttribute("download", "file.pdf")
element.style.display = "none"
document.body.appendChild(element)
element.click()
document.body.removeChild(element)
Anyway this is only a useful method if u want to create/modify the downloaded data from the client side, but if u are getting it as it is from the server side then its better just to open a new url, letting the browser handle it.
I have a backend that I set up to return a file through setting the header
Content-Disposition: attachment;filename=somefile.csv
It works directly in the browser and downloads the file immediately upon invoking the URL that points to that resource.
My goal is to have a button in an Angular 2 template. When the user clicks that button, I'd need to collect some data from the client-side (some IDs) and send it to the server to invoke that file download URL.
I'd like the user to stay on the same page and not have any new tabs open up but simply have the file start downloading (just like when the URL is invoked directly).
It will need to be done through a POST request because I can have quite a bit of data to send to identify what resource needs to be downloaded.
What does the call on the Angular 2 side look like for this? I tried a couple of things but I am obviously on the wrong path.
Any help would be appreciated!
I had a similar issue when i was trying to download a PDF file which my Node server was sending. I was making a GET request on my server with some id details.
This is what worked for me.
Function Calling my service
printBill(receiptID) {
this.BillingService.printBill(receiptID)
.subscribe(res => {
saveAs(res,"InvoiceNo"+receiptID+".pdf");
let fileURL = URL.createObjectURL(res);
window.open(fileURL);
})
}
Service
printBill(billID) {
return this.http.get('/billing/receipt/'+billID,
{ responseType: ResponseContentType.Blob })
.map((res) => {
return new Blob([res.blob()], { type: 'application/pdf' })
})
}
And dont forget to import ResponseContentType
Hope this helps you
i have implemented it like this.
i have a service requesting file download. The response return a url, which is on amazon s3. This is a zip file containing what i want to download.
the below works on all browsers.
in your controller
requestDownload() {
this.downloadservice.downloadImages(obj)
.subscribe(
response => this.download(response )
);
}
// res is an object
download(res){
var link = document.createElement("a");
link.download = "a";
link.href = res.link;
document.body.appendChild(link);
link.click();
}
downloadservice file
downloadImages(body): Observable<any>{
let headers = new Headers({ 'Content-Type': 'application/json' });
let options = new RequestOptions({ headers: headers });
return this.http.post("/Camera51Server/getZippedImages", body, options)
.map((res:Response) => res.json())
.catch(this.handleError);
}
if you like i can give you a link to the repository.
I am sending a PDF stream from my server to the client and then displaying that PDF in an <object> tag in the client. Here is my code:
server.js
router.get('/pdf', function * () {
var stream = getMyFileStream();
this.set('Content-Type', 'application/pdf');
this.response.body = stream;
});
client.js
var objectElement = document.querySelector('object');
fetch('/pdf', request)
.then(res => res.blob())
.then(blob => URL.createObjectURL(blob))
.then(url => {
objectElement.setAttribute('data', url)
objectElement.setAttribute('type', 'application/pdf')
})
This code seems to work correctly, however I get the following warning in my console:
Resource interpreted as Document but transferred with MIME type application/pdf
Why does it think my resource should be text/html? If I change my Content-Type header to text/html, it makes the warning go away but it obviously causes a rendering issue of the PDF. Any help would be appreciated.
In your fetch statement you need to set a header type because the default will be document. Since you have not specified the matching content the browser is letting you know something hooky is happening.
// to stop browser complaining use a request object to specify header
var request = new Request('/pdf', {
headers: new Headers({
'Content-Type': 'application/pdf'
})
});
fetch(request)
.then(function() { /* handle response */ });
...
Note: This is from my own evaluation research of the fetch api. I have not yet used it in anger so this is untested. I found this site useful https://davidwalsh.name/fetch.
Let me know how you get on please.
Most likely this is because there's a redirect from /pdf and/or there is no file extension.
Add this extra header:
this.set('Content-Disposition', 'attachment; filename=results.pdf');
I currently have the following working piece of code (angular but applies to any JS framework):
var url = '/endpoint/to/my/file';
$http({
method: 'GET',
url: url
})
.success(function(jdata) {
window.location = url;
})
.error(function(je){
// display errors on page
});
The above is called after a form was completed and the user has clicked on "submit" (the real situation is a bit more complex than this but it is the same idea). I do the form check asynchronously, so there's no page reload.
If the request is successful, returns a binary (a pdf file), if not succesful, the request returns a 400 BadRequest with errors formatted in JS. So what I do is, if successful, I redirect to the same url to have the PDF otherwise I get the JSON error object and do something with it.
How can I refrain from making two requests if the requests is successful?
Note1: on the backend side I would like to keep only one route that does everything, check + return PDF
Note2: the current situation is pretty neat in my opinion, since I have an asynchronous form check and if successful the file downloads directly in the browser since I have "CONTENT-DISPOSITION" -> "attachment" in the HTTP header of the successful response
Update: additional information about the architecture as requested by Emile:
In my use case I have one endpoint that checks inputs (and other external requirements). For security reasons I cannot output the PDF if all requirements are not satisfied so I have to do the check prior to delivering the file ( the file is automatically generated) anyway. So having two endpoints would just be redundant and add some unnecessary complexity.
While writing I think an alternative solution could be to pass an argument on the endpoint while doing the check, so that if successful, it stops and does not generate the PDF, and then redirect to the same endpoint without the flag which will output the PDF.
So I do the check twice but only load (and generate - which is resource intensive) the file only once and I have only one endpoint...
Here's the adapted code:
var url = '/endpoint/to/my/file';
$http({
method: 'GET',
url: url+'?check'
})
.success(function(jdata) {
window.location = url;
})
.error(function(je){
// display errors on page
});
On the backend side (I use Play framework/Scala)
def myendpoint(onlyDoCheck: Boolean = false) = Action{implicit request =>
myForm.bindFromRequest.fold(
e => BadRequest(myErrors),
v => if(onlyDoCheck) Ok(simpleOkResponse) else Ok(doComputationgeneratefileandoutputfile)
)
}
The real deal
The best you could do is split your endpoint.
One for the form and the convenience of having errors without refresh.
Then, on success, redirect to your other endpoint which only downloads the file.
If the file was on the disk and wasn't auto-generated and required to be authenticated to be downloaded, you could hide the file behind a normal endpoint, do the checks, and return the file using X-Accel-Redirect header with nginx or X-Sendfile using apache.
The hack
Disclaimer: This is more of a hack than the best solution. As mention by #Iceman, Safari, IE, Safari-iOS, Opera-mini and some such browsers don't support this particular spec.
In your server-side endpoint, if the file is available without errors, you can set the header to the content-type of the file (like 'application/pdf') so the download will starts automatically.
If there are errors, don't set the header and return a json of the errors to inform the user through javascript.
Since we don't know what's behind, here's a python (Django) example:
response = HttpResponse(content_type='application/pdf')
response['Content-Disposition'] = 'attachment; filename=your_filename.pdf'
response.write(repport.printReport(participantId))
return response
You can handle the response in the ajax success callback:
$.ajax({
url: 'endpoint.php',
success: function(data) {
var blob = new Blob([data]);
var link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.download = "filename.pdf";
link.click();
}
});
You could also try the jQuery fileDownload plugin mentioned in this answer.
I have a REST API that I'm using alongside Angular. Currently I have post objects that have file attachments. To download each file attachment, a call must be made to /get/file/{id}, but an authorization token is required each time to convey the user is logged in and has proper rights.
After much searching, I ended up with the following setup using Angular-File-Saver (which uses FileSaver.js and Blob.js):
feed.html
<p class="post-attachments text-right" ng-repeat="file in post.files">
<button type="button" class="btn-link" ng-click="feed.getFile(file)">{{file.name}}</button>
</p>
feed.controller.js
function getFile(file) {
var file_id = file.id;
PostService.GetFile(file_id).then(function(response) {
var file_type = response.headers('Content-Type');
var data = new Blob([response.data], {type: file_type});
FileSaver.saveAs(data, file.name);
}, function error(response) {
console.log(response);
});
}
While this sort-of works, there's a few big problems. Because this is different from just using an anchor link like <a href="link.com/assets/stockphoto.jpeg" download></a>, it's really a hack on downloading a file and results in poor browser support. Safari and mobile iOS don't currently work with this solution (Safari opens the file in a new window using blob:http://siteaddress.com and mobile Safari doesn't even load the file).
Additionally, there's no browser support for a progress indication. This means clicking the download doesn't actually do anything until the API returns the entire download, where the file is then shown in the browser downloads section. This results in wait times without any indication of what's happening.
What I'm wondering is this--is there a better way to handle this problem besides not requiring an authorization token each time the /get/file/{id} endpoint is called? I'm bashing my head against the wall here since this seems like a common issue but has been difficult to find answers on.
You can use angular's $http to make your request:
makeRequest = function(req){
$http(req)
.success(function(data, status){
console.log(data)
})
.error(function(data, status){
console.log(data)
})
}
// Use it
makeRequest({
method: 'POST',
url: ('/get/file/' + id),
headers: { authorization: token }
})