Javascript JS：使用ArrayBuffer或Blob而不是URL呈现PDF

我知道一个类似的问题：。这个问题得到了令人敬畏的回答，但我的问题不同，我的PDF是通过对Web API实现的RESTful调用检索的。让我解释一下

首先，以下是使用PDF.JS通过URL打开PDF的基本方法：

PDFJS.getDocument("/api/path/to/my.pdf").then(function (pdf) {
  pdf.getPage(1).then(function (page) {
    var scale = 1;
    var viewport = page.getViewport(scale);
    var canvas = document.getElementById('the-canvas');
    var context = canvas.getContext('2d');
    canvas.height = viewport.height;
    canvas.width = viewport.width;
    page.render({canvasContext: context, viewport: viewport});
  });
});

这非常有效，但我使用Angular及其

$resource

服务通过我的RESTfulWebAPI请求PDF。我知道PDF.JS允许我用定义的

DocumentInitParams

对象替换在PDFJS.getDocument方法（如上）中以字符串形式传递URL。使用DocumentInitParams对象的工作原理如下：

var docInitParams = {
    url: "/api/path/to/my.pdf",
    httpHeaders: getSecurityHeaders(), //as needed
    withCredentials: true
};
PDFJS.getDocument(docInitParams).then(function (pdf) {
    ...
});

var myPdf = myService.$getPdf({ Id: 123 });

//It's an Angular $resource, so there is a promise to be fulfilled...
myPdf.$promise.then(function() {
    var docInitParams = {
        data: myPdf
    };
    PDFJS.getDocument(docInitParams).then(function (pdf) {
        ...
    });
});

这也行得通，但它通过要求我构造api URL来绕过我的

$resource

。但这没关系，因为PDFJS允许我直接向它提供PDF数据，而不是向它提供PDF的URL，如下所示：

var docInitParams = {
    url: "/api/path/to/my.pdf",
    httpHeaders: getSecurityHeaders(), //as needed
    withCredentials: true
};
PDFJS.getDocument(docInitParams).then(function (pdf) {
    ...
});

var myPdf = myService.$getPdf({ Id: 123 });

//It's an Angular $resource, so there is a promise to be fulfilled...
myPdf.$promise.then(function() {
    var docInitParams = {
        data: myPdf
    };
    PDFJS.getDocument(docInitParams).then(function (pdf) {
        ...
    });
});

这就是我似乎无法上班的地方。我可以告诉

myService.$gtPdf

方法以

blob

或

arraybuffer

的形式返回数据，但两者都不起作用。我也尝试将arraybuffer返回的数据转换为

Uint8Array

，但没有成功

我不知道还有什么可以尝试的，我真的需要一个提示

如何获取服务返回的数据以使用PDFJS？

---

提前感谢。

您没有将响应数据传递到PDF.js，而是传递资源的一个实例：

var myPdf=myService.$getPdf（{Id:123}）；
myPdf.$promise.then（函数（）{
var docInitParams={
资料：myPdf

您还没有显示

$getPdf

的代码，但我猜它相当于

var myService=$resource（'/foo'，{}，{$getPdf:{responseType:'arraybuffer'}}）；
var myPdf=myService.$getPdf（）；

默认情况下，AngularJS

$resource

将响应视为一个对象（从JSON反序列化），并将对象中的任何属性复制到资源实例中（

myPdf

）

显然，由于您的响应是一个数组缓冲区（或Blob、类型化数组或其他类型），因此这是行不通的。获得所需响应的方法之一是使用

transformResponse

将响应对象包装到对象中：

var myService=$resource（'/foo'，{}{
$getPdf:{
响应类型：'arraybuffer'，
transformResponse：函数（数据、HeaderGetter）{
//将ArrayBuffer对象存储在名为“data”的属性中
返回{data:data}；
}
}
});
var myPdf=myService.$getPdf（）；
myPdf.$promise.then（函数（）{
var docInitParams={
资料：myPdf.data
};
getDocument（docInitParams）.then（函数（pdf）{
// ...
});
});

或者简单地使用以下方法（避免不必要的局部变量）：

myService.$getPdf（）.$promise.then（函数（myPdf））{
PDFJS.getDocument({
资料：myPdf.data
})。然后（函数（pdf）{
// ...
});
});

谢谢！我想我需要一位PDF.JS专家来插话，但有更好角度知识的人才是关键。我已经在使用transformResponse，但没有正确使用，因为我将资源视为响应。一旦你指出了这一点，其他的一切都准备就绪。您好，你如何处理.t中的PDFo将文档加载到viewer.html？如果要将其与标准viewer.html一起使用，请使用

PDFViewerApplication.open（myPdf）；

。