AngularJS：下载PDF文件从服务器 [英] AngularJS: download pdf file from the server

问题描述

我要使用 $ HTTP 从Web服务器下载一个PDF文件。我用这个code伟大的工程，我的文件只保存是作为一个HTML文件，但是当我打开它，它被打开PDF格式，但在浏览器中。我测试了它在Chrome 36，Firefox的31和Opera 23。

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.

这是我的angularjs code（在此基础上code ）：

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

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

在我的服务器我使用Laravel，这是我的回应：

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

其中， $的contentType 是应用程序/ PDF 和 $ contentDisposition 是附件; =文件名。基名（$文件名）。'

$文件名 - 例如， 59005-57123123.PDF

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

我的响应头：

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

我在做什么错了？

推荐答案

根据截图，看起来你已经设置Firefox作为默认的应用程序打开PDF文档的计算机上。这是这样，使用它的嵌入式浏览器。

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.

所以它是保存为PDF格式，但你的开放式应用程序preferences使它看起来像Firefox HTML文档。

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

如果你改变了开放式preference回至Adobe Reader然后另存为类型应该正确地显示在浏览器。

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

我希望帮助。

这篇关于AngularJS：下载PDF文件从服务器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！