PDF.JS：使用ArrayBuffer或Blob而不是URL渲染PDF

Question

我知道一个类似的问题： Pdf.js：使用base64文件源而不是url呈现pdf文件 。 这个问题得到了Codetoffel的极好回答，但我的问题不同之处在于我的PDF是通过RESTful调用我的Web API实现来检索的。 让我解释...

首先，这是使用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允许我使用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 。 我试着转换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) {
        // ...
    });
});