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

Question

我正在努力让angular-pdfjs-viewer在Typescript写的角度应用中工作。

我总是收到带有文字的红色错误消息：

  

PDF.js v1.7.354（build：0f7548ba）

     

消息：流必须有数据

PDF数据来自ASP.NET WebAPI控制器，我们的应用程序架构将前置网站和API都部署为两个独立的Web应用程序。

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

WebAPI返回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（其他应用程序需要依赖关系） ）
• 我正在使用与angular-pdfjs-viewer.js
“一起发布”的PDF.js相关性

角度控制器如下所示：

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>

在浏览器中检查网络，的 已下载。

控制器中的

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' } // all lowercase

当我应该使用

时

{{1}}

一旦更改，我在问题中发布的代码就完美无缺。