AngularJS：从服务器下载pdf文件

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.

我想使用$ http从Web服务器下载pdf文件。我使用这个效果很好的代码,我的文件只保存为html文件,但是当我打开它时,它会以pdf格式打开但在浏览器中。我在Chrome 36,Firefox 31和Opera 23上测试过它。

This is my angularjs code (based on this code):

这是我的angularjs代码(基于此代码):

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

                                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:

在我的服务器上,我使用Laravel,这是我的回答:

$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) . '"'

其中$ contentType是application / pdf,$ contentDisposition是附件; filename =“。basename($ fileName)。'”'

$filename - e.g. 59005-57123123.PDF

$ filename - 例如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?

我究竟做错了什么?

2 个解决方案

#1

Default Open-In Application:

Based on the screenshot, it looks like you have set Firefox as the default application to open your PDF documents on that computer. Which it does, using it's embedded viewer.

根据屏幕截图,您似乎已将Firefox设置为在该计算机上打开PDF文档的默认应用程序。它使用它的嵌入式查看器。

So it is saving as a PDF, but your open-in application preferences make it appear as Firefox Html Document.

因此它以PDF格式保存,但您的开放式应用程序首选项使其显示为Firefox Html文档。

If you change the open-in preference back to Adobe Reader then the Save-As type should display correctly in the browser.

如果将打开的首选项更改回Adobe Reader,则应在浏览器中正确显示“另存为”类型。

I hope that helps.

我希望有所帮助。

#2

To instruct the browser to download the file instead of showing it in the browser, try the add following headers to the server response:

要指示浏览器下载文件而不是在浏览器中显示该文件,请尝试将以下标头添加到服务器响应中:

Content-Disposition:attachment; filename="filename.xxx"
Content-Type:application/octet-stream