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

问题描述

我想使用 $http 从 Web 服务器下载 pdf 文件.我使用这段代码效果很好，我的文件只保存为 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 代码(基于此代码):

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 是 application/pdf 而 $contentDisposition 是 attachment；filename=" .basename($fileName) .'"'

where $contentType is application/pdf and $contentDisposition is attachment; filename=" . basename($fileName) . '"'

$filename - 例如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，但您打开的应用程序首选项使其显示为 Firefox Html 文档.

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

如果您将打开方式首选项改回 Adob​​e 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屋！