AngularJS: download pdf file from the server
        Posted  
        
            by 
                Bartosz Bialecki
            
        on Stack Overflow
        
        See other posts from Stack Overflow
        
            or by Bartosz Bialecki
        
        
        
        Published on 2014-08-25T16:07:40Z
        Indexed on 
            2014/08/25
            16:20 UTC
        
        
        Read the original article
        Hit count: 339
        
JavaScript
|angularjs
I want to download a pdf file from the web server using $http. I use this code which works great, my file only is save as a html file, but when I open it it is opened as pdf but in the browser. I tested it on Chrome 36, Firefox 31 and Opera 23.
This is my angularjs code (based on this code):
UserService.downloadInvoice(hash).success(function (data, status, headers) {
                    var filename,
                        octetStreamMime = "application/octet-stream",
                        contentType;
                    // Get the headers
                    headers = headers();
                    if (!filename) {
                        filename = headers["x-filename"] || 'invoice.pdf';
                    }
                    // Determine the content type from the header or default to "application/octet-stream"
                    contentType = headers["content-type"] || octetStreamMime;
                    if (navigator.msSaveBlob) {
                        var blob = new Blob([data], { type: contentType });
                        navigator.msSaveBlob(blob, filename);
                    } else {
                        var urlCreator = window.URL || window.webkitURL || window.mozURL || window.msURL;
                        if (urlCreator) {
                            // Try to use a download link
                            var link = document.createElement("a");
                            if ("download" in link) {
                                // Prepare a blob URL
                                var blob = new Blob([data], { type: contentType });
                                var url = urlCreator.createObjectURL(blob);
                                $window.saveAs(blob, filename);
                                return;
                                link.setAttribute("href", url);
                                link.setAttribute("download", filename);
                                // Simulate clicking the download link
                                var event = document.createEvent('MouseEvents');
                                event.initMouseEvent('click', true, true, window, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
                                link.dispatchEvent(event);
                            } else {
                                // Prepare a blob URL
                                // Use application/octet-stream when using window.location to force download
                                var blob = new Blob([data], { type: octetStreamMime });
                                var url = urlCreator.createObjectURL(blob);
                                $window.location = url;
                            }
                        }
                    }
                }).error(function (response) {
                    $log.debug(response);
                });
On my server I use Laravel and this is my response:
$headers = array(
                'Content-Type' => $contentType,
                'Content-Length' => strlen($data),
                'Content-Disposition' => $contentDisposition
            );
            return Response::make($data, 200, $headers);
where $contentType is application/pdf and $contentDisposition is attachment; filename=" . basename($fileName) . '"'
$filename - e.g. 59005-57123123.PDF
My response headers:
Cache-Control:no-cache
Connection:Keep-Alive
Content-Disposition:attachment; filename="159005-57123123.PDF"
Content-Length:249403
Content-Type:application/pdf
Date:Mon, 25 Aug 2014 15:56:43 GMT
Keep-Alive:timeout=3, max=1
What am I doing wrong?
© Stack Overflow or respective owner