PDF.JS：使用ArrayBuffer或斑点，而不是URL的PDF渲染 [英] PDF.JS: Render PDF using an ArrayBuffer or Blob instead of URL

问题描述

我知道了类似的问题这一个：<一href=\"http://stackoverflow.com/questions/12092633/pdf-js-rendering-a-pdf-file-using-a-base64-file-source-instead-of-url\">Pdf.js:渲染使用base64文件来源，而不是网址的PDF文件。这个问题是由赫然 codetoffel 但我的问题是，不同的我的PDF通过检索回答基于REST调用我的Web API的实现。让我解释一下...

I know of a similar question to this one: Pdf.js: rendering a pdf file using a base64 file source instead of url. That question was awesomely answered by Codetoffel but my question is different in that my PDF is retrieved via a RESTful call to my Web API implementation. Let me explain...

首先，这里使用PDF.JS通过URL打开PDF一个基本方式：

First, here's a basic way to use PDF.JS to open a PDF via a URL:

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});
  });
});

这个伟大的工程，但我使用的角度和 $资源服务，让我通过基于REST的Web API为PDF请求。我知道PDF.JS让我来代替传递URL作为PDFJS.getDocument方法（上图）的字符串中包含 DocumentInitParams 对象，其定义的此处。使用DocumentInitParams对象的工作原理如下：

This works great, but I am using Angular and its $resource service to make the request for the PDF via my RESTful Web API. I do know that PDF.JS allows me to replace passing the URL as a string in the PDFJS.getDocument method (above) with a DocumentInitParams object, which is defined here. Using the DocumentInitParams object works as follows:

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

这也适用，但它的作品在我的角 $资源通过要求我来构造API URL。但是没关系，因为PDFJS让我直接给它的PDF数据，而不是给它一个URL到PDF，如下：

This also works, but it works around my Angular $resource by requiring me to construct the api URL. But that's OK because PDFJS allows me to give it the PDF data directly, instead of giving it a URL to the PDF, as follows:

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 过，但都无济于事。

This is the one I can't seem to get to work. I can tell the myService.$gtPdf method to return the data as a blob or as an arraybuffer but neither works. I've tried to convert the arraybuffer returned data to an Uint8Array too, but to no avail.

我不知道还有什么尝试，真的可以使用一个技巧。

I'm not sure what else to try and could really use a tip.

如何获取数据从我的服务返回与PDFJS合作？

先谢谢了。

推荐答案

您不是响应数据传递给PDF.js，但资源的一个实例：

You're not passing the response data to PDF.js, but an instance of the resource:

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

您还没有表现出你的code为 $ getPdf ，但我想，这是东西等同于

You haven't shown your code for $getPdf, but I guess that it is something equivalent to

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

默认情况下，AngularJS $资源对待响应为对象（从JSON反序列化），并复制从对象的任何属性的资源实例（ myPdf​​ 在previous段）。

By default, an AngularJS $resource treats the response as an object (deserialized from JSON) and copies any properties from the object to the resource instance (myPdf in the previous snippet).

显然，因为你的反应是一个数组缓冲区（或斑点，类型数组或其​​他），这是行不通的。一，以获得所需的响应方式是使用 transformResponse 来包装响应对象中的对象：

Obviously, since your response is an array buffer (or Blob, typed array or whatever), this is not going to work. One of the ways to get the desired response is to use transformResponse to wrap the response object in an object:

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) {
        // ...
    });
});

或者干脆以下（避免了不必要的局部变量）：

Or simply the following (avoided unnecessary local variables):

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

这篇关于PDF.JS：使用ArrayBuffer或斑点，而不是URL的PDF渲染的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！