javascript - PDF.JS:使用 ArrayBuffer 或 Blob 而不是 URL 呈现 PDF

Question

我知道一个与此类似的问题:Pdf.js: rendering a pdf file using a base64 file source instead of url . Codetoffel 很好地回答了这个问题但我的问题是不同的，因为我的 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 服务通过我的 RESTful Web API 发出 PDF 请求。我确实知道 PDF.JS 允许我用定义为 here 的 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) {
    ...
});

这也有效，但它通过要求我构建 api URL 来绕过我的 Angular $resource。但这没关系，因为 PDFJS 允许我直接给它 PDF 数据，而不是给它一个 PDF 的 URL，如下所示:

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？

提前致谢。

Answer 1

您不是将响应数据传递给 PDF.js，而是传递一个资源实例:

var myPdf = myService.$getPdf({ Id: 123 });
myPdf.$promise.then(function() {
    var docInitParams = {
        data: myPdf

您还没有显示您的 $getPdf 代码，但我猜它等同于

var myService = $resource('/foo', {}, {$getPdf:{responseType: 'arraybuffer'}});
var myPdf = myService.$getPdf();

默认情况下，AngularJS $resource 将响应视为对象(从 JSON 反序列化)并将对象中的任何属性复制到资源实例(myPdf上一个片段)。

显然，由于您的响应是一个数组缓冲区(或 Blob、类型化数组或其他)，因此这是行不通的。获得所需响应的方法之一是使用 transformResponse 将响应对象包装在一个对象中:

var myService = $resource('/foo', {}, {
    $getPdf: {
        responseType: 'arraybuffer',
        transformResponse: function(data, headersGetter) {
            // Stores the ArrayBuffer object in a property called "data"
            return { data : data };
        }
    }
});
var myPdf = myService.$getPdf();
myPdf.$promise.then(function() {
    var docInitParams = {
        data: myPdf.data
    };

    PDFJS.getDocument(docInitParams).then(function (pdf) {
        // ...
    });
});

或者只是以下(避免不必要的局部变量):

myService.$getPdf().$promise.then(function(myPdf) {
    PDFJS.getDocument({
        data: myPdf.data
    }).then(function (pdf) {
        // ...
    });
});