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

Question

我有这个 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，但文件是否已下载或只是在桌面上打开并不重要。

编辑 1：

使用 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 而无需将文件嵌入我的网站？

Answer 1

您很可能知道，ios 设备不会让您下载文件并将其存储到 memory/disk，就像您在 desktop/laptop.[=13= 上所做的那样]

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

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

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

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

window.open() in an iPad

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

恐怕这可能是您唯一可行的选择。 Having the iPad store the pdf into apps like iBooks will not work，据此post。无法使用 javaScript.

自动执行

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

如果您对这个折衷方案感兴趣，并且运行对使用 window.open() 实现它的问题感兴趣，我很乐意提供帮助。

Answer 2

服务器似乎没有将响应的 mime-type 设置为 application/pdf。尝试向 http 响应添加 "Content-Type" header，ipad 应该会在关联的应用程序中打开 pdf。

Answer 3

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

您的服务器端代码已经在做这项工作。但是可能缺少内容类型。

在客户端我建议你单独打开window/tab如下：-

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

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

How to handle PDF file from Web API in AngularJS?

asp.net-web-api

angularjs