File download angular and Laravel

Question

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');

Answer 1

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.