AngularJS:从服务器下载 pdf 文件

本文介绍了AngularJS:从服务器下载 pdf 文件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我想使用 $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.

希望能帮到你.