angular-pdfjs-viewer - 消息：流必须有数据

Question

我正在努力让 angular-pdfjs-viewer 在用 Typescript 编写的 angular 应用程序中工作。

我总是收到一条红色的错误消息，内容为：

PDF.js v1.7.354 (build: 0f7548ba)

Message: stream must have data

PDF 数据来自 ASP.NET WebAPI 控制器，我们的应用程序的体系结构具有面向前端的网站和 API 都部署为两个独立的 Web 应用程序.

因此，我想在 angular 控制器中下载 PDF，并将 PDF 源设置为指令的 data 属性。

WebAPI returns PDF 是这样的：

[HttpGet]
[Route("invoice/{id}/originalpdf")]
public async Task<ActionResult> GetInvoiceSourceImagePdf(string id)
{
    var userId = User.Identity.GetMyId();


    var bytes = await _serviceThatReturnsByteArray(id);

    return File(bytes, System.Net.Mime.MediaTypeNames.Application.Pdf);
}

我没有发现上述问题。在浏览器中，如果我点击了这个端点，我就会得到完全按预期呈现的文档。

在前端方面：

我们正在使用来自 https://github.com/legalthings/angular-pdfjs-viewer

angular-pdfjs-viewer

我们包括（通过 BundleConfig），源的顺序是：pdf.js，然后是 angular.js，最后是 angular-pdfjs-viewer.js（与其他应用程序所需的依赖项之间）
我正在使用 "ships" 与 angular-pdfjs-viewer.js

angular 控制器如下所示：

module MyApp {
    class PdfDialogController {

        public static $inject = ["$scope", "$window", "$log", "$uibModalInstance", "$http"];

        pdfData: Uint8Array;

        constructor(/*stuff*/){
            this.$http.get(the_url, { responseType: 'arrayBuffer' })
                .then((t) => {
                    this.pdfData = new Uint8Array(<ArrayBuffer>t.data);
            });
        }
    }
}

在视图中，我们有：

<div class="modal-body">
    <div id="pdf-container">
        <pdfjs-viewer data="vm.pdfData"></pdfjs-viewer>
    </div>
</div>

在浏览器中检查网络，PDF内容已下载。

控制器中的

t.data 包含以

开头的数据

%PDF-1.3\n%����\n1 0 obj\n[/PDF /Text]

然而，视图显示：

控制台输出错误信息：

Error: An error occurred while loading the PDF.

我做错了什么，我如何确定 PDF 数据的问题（如果有的话）。

Answer 1

嗯，原来我用的是

{ responseType: 'arrayBuffer' } // camel case

我应该在什么时候使用

{ responseType: 'arraybuffer' } // all lowercase

更改后，我在问题中发布的代码完美运行。

angular-pdfjs-viewer - 消息：流必须有数据

angular-pdfjs-viewer - Message: stream must have data

asp.net-web-api

angularjs

angularjs-directive