File download angular and Laravel - angularjs

I am trying to download a pdf file generated by laravel in AngularJs. So far i have been able to get the file from laravel but when i click the action, Angular does not download the file but just returns a response that includes the file as in the diagram below.
Response from laravel returns pdf file
How do i get the file to download?
Laravel
public function getPrintInvoice()
{
$pdf = PDF::loadView('crystal.invoice');
return $pdf->download('hello.pdf');
}
Angular
$http.get('print-invoice');

Because $http.get() uses an asynchronous call to the server the response is captured by the XMLHttpResponse object rather than presented directly to the user. The easiest method of presenting the PDF to the user is to skip the angular call, e.g. use $location.url('/print-invoice'); or $window.open('/print-invoice');
If you want to stick with the $http methods (e.g. if you want to be able to perform some action based on the success or failure of the file get) you'll need to capture the return value from the download and use the HTML5 Blob methods. I'd recommend using something like Angular File Saver. But it does require a bit more work on the server side to ensure the data is in the correct format.

Related

Strongloop loopback-component-storage + angularjs file upload

I created a Container model and connected it to an S3 bucket which all works well. I am trying to upload a file using Angular, using the service file generated with lb-ng.
If I do Container.upload({container: 'testbucket'}, {file: file}) call will fire but nothing uploads. Am sure I have just got the params wrong but cannot find any example of the angular library being used, and the official example at https://github.com/strongloop/loopback-example-storage uses a different angular uploader to handle the upload, which I'd like to avoid if possible.
Thanks!

How to save a large json object to file?

Just started with angular and I am debugging my angular app and would like to save a large json object. Is it possible to save this in chrome? Or how to save this with angular?
Extra info: I want to save the contents of $rootScope to a json file.
Not sure from your question where you want to save the file so I'll assume server side you could post the json to a rest service using $post (a get request will probably be too long) on the server that writes the file with the posted contents.
You should use the browser tools from your favorite browser. in your code write this code:
// ..
var json = JSON.stringify($rootScope);
console.log(json);
You will be able to copy the content from the console and you can save it into a new text file.

angularjs: download REST API response as CSV file

I have a REST API whose response json (array of objects).
I would like to provide a button in my view like "Download results to CSV" and
and when user clicks on the link csv file should be downloaded with comma separated values.
What is best way to achieve this in angularjs?
Check out this fiddle (not the author):
Fiddle
You can either implement that on your client side, or alternatively on your server side with a new API call to get the CSV file directly.

Angularjs: write json data to file

Simple question, is it possible to write json data (received from API) to a json file in my directory structure. The api returns a json string. Is there any method in angular that supports this or do I need to rely on jquery? Extra information on this topic is welcome.
You cannot access the user's filesystem from javascript, instead you should present the user with a save dialog (it's up to the user where to save the file). AngularJS doesn't support this out of the box, you could however save a file to the default download folder by converting the JSON to a base64 string and bind it to an a href.
<a href="data:application/octet-stream;charset=utf-16le;base64,ew0KICAgICJnbG9zc2FyeSI6IHsNCiAgICAgICAgInRpdGxlIjogImV4YW1wbGUgZ2xvc3Nhcnki
IA0KICAgIH0NCn0=">json file</a>
For more control to save files to the client, you could use FileSaver which has support for older browsers.

Capture AngularJS DATA_URI-based CSV

I have an account with a reporting site that uses AngularJS and the CSV plugin to export our stats for a particular app. Working with the browser, I can click on 'Download CSV' and AngularJS uses the Data_URIs for downloading the CSV -- so, there is no server request.
Now, what I need is to be able to download this CSV using CURL. Since there is no server request, I can't reproduce that. Also scraping isn't a good idea since I don't want my backend to break when the HTML changes (obviously).
So, in summary: How do I capture the CSV generated by the getCSV() function in AngularJS?
You can achieve this using a headless WebKit engine like phantomjs.
After a quick look and the angular js you can use this code to return the CSV content after you log in.
page.open('https://www.mobilecore.com/newdashboard/', function(status) {
data = page.evaluate(function() {
angular.element($('#getCsv')).scope().setCsvContent();
return angular.element($('#getCsv')).scope().csvContent;
});
console.log(data);
});
To log in use this easy example: https://github.com/ariya/phantomjs/blob/master/examples/post.js

Resources