如何在 AngularJS 中处理来自 Web API 的 PDF 文件？答案

【问题标题】：How to handle PDF file from Web API in AngularJS?如何在 AngularJS 中处理来自 Web API 的 PDF 文件？
【发布时间】：2015-05-26 13:00:56
【问题描述】：

我有这个Web API post 方法来生成PDF：

[HttpPost]
[Route("api/pdf")]
public HttpResponseMessage Post(CustomType type)
{
    StreamContent pdfContent = PdfGenerator.GeneratePdf();

    HttpResponseMessage response = new HttpResponseMessage(HttpStatusCode.OK);
    response.Content = pdfContent;
    response.Content.Headers.ContentDisposition = new System.Net.Http.Headers.ContentDispositionHeaderValue("attachment");
    response.Content.Headers.ContentDisposition.FileName = "PDFName.pdf"

    return response;
}

在 AngularJS 中，我想得到这样的 PDF 文件：

$http.post("api/pdf", object).then(function (results) {
    var data = results.data;

    //TODO: got PDF, how to handle?

}, function (results) {
    console.log(results);
});

但是我应该如何处理 AngularJS 中的 PDF 数据？在 iPad 上，我希望 PDF 被打开，但如果文件是下载的或只是在桌面上打开并不重要。

EDIT1：

使用SaveAS JS library 我可以在桌面上制作一个可行的解决方案：

$http.post("api/pdf", object).then(function (results) {
    var data = results.data;

    var file = new Blob([data], { type: 'application/pdf' });
    saveAs(file, "test.pdf");

}, function (results) {
    console.log(results);
});

文件正在直接下载到我的桌面，但由于某种原因，此解决方案在 iOS 中不起作用。什么都没发生。看到这个JSFiddle。

有没有其他方法可以在我的 iPad 上显示 PDF 而无需在我的网站上嵌入文件？

【问题讨论】：

你看过这个帖子吗：stackoverflow.com/questions/21628378/…
Dennis，您应该查看@DavidTansey 上面建议的帖子，它告诉您如何使用 arraybuffer、$sce 和 embed 在您的 angularjs 应用程序中获取和显示 pdf 文件
请看我的EDIT1。
这个问题有几个方法可以试试stackoverflow.com/questions/26069378/…
我正在做一个 GET 并且必须通过 { responseType: 'blob' } 来让 AngularJS 停止损坏我的 PDF。 Gleaned from here$http.get("api/pdf", { responseType: 'blob' })

标签： angularjs asp.net-web-api

【解决方案1】：

PDF 可能很大，在处理如此大的字节块时，您应该宁愿 stream 这些字节而不是在某个地方收集到某个变量中。

您的服务器端代码已经在完成这项工作。但内容类型可能会丢失。

在客户端，我建议您在单独的窗口/选项卡中打开如下：-

window.open('http://yourapidomain/api/pdf','resizable,scrollbars');

【讨论】：

【解决方案2】：

似乎服务器没有设置对 application/pdf 的响应的 mime 类型。尝试在 http 响应中添加“Content-Type”标头，ipad 应该会在相关应用中打开 pdf。

【讨论】：

【解决方案3】：

您很可能知道，iOS 设备不会像在台式机/笔记本电脑上那样让您下载文件并将其存储到内存/磁盘中。

下载的项目必须由应用打开

由于您已经在网站上工作，浏览器似乎是一个自然的候选者。

我猜您不希望将 pdf 文件嵌入到您的网站中，另一种方法是在新的浏览器选项卡中打开 pdf。

如果您可以接受这样的解决方案，请查看此 SO 帖子：

window.open() in an iPad

提供的解决方案确实有效，但前提是 Safari 配置为不阻止弹出窗口。

恐怕这可能是您唯一可行的选择。 Having the iPad store the pdf into apps like iBooks will not work，根据这篇文章。它不能用 javaScript 自动化。

据我所知，在这种情况下没有完美的解决方案，只有一个最可接受的解决方案：如果检测到 ios，则在浏览器的新选项卡中打开 pdf。

如果您对这种折衷方案感兴趣，并在使用 window.open() 实现它时遇到问题，我很乐意提供帮助。

【讨论】：