PDF.JS: le Rendu PDF à l'aide d'un ArrayBuffer ou Blob au lieu de l'URL

Je sais que d'une question similaire à celui-ci: Pdf.js: le rendu d'un fichier pdf à l'aide d'un base64 fichier source au lieu de l'url. Cette question a été terriblement répondu par Codetoffel mais ma question est différent, mon PDF est extrait par l'intermédiaire d'un Réparateur appel à mon implémentation d'API Web. Laissez-moi vous expliquer...

D'abord, voici une méthode de base pour l'utilisation PDF.JS pour ouvrir un fichier PDF via une 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});
  });
});

Cela fonctionne très bien, mais je suis en utilisant Angulaire et son $resource service pour faire la demande pour le fichier PDF via mon Web RESTful API. Je sais que PDF.JS me permet de remplacer en passant l'URL comme une chaîne de caractères dans le PDFJS.getDocument méthode (ci-dessus) avec un DocumentInitParams objet, qui est définie ici. À l'aide de la DocumentInitParams objet fonctionne comme suit:

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

Cela fonctionne aussi, mais il fonctionne autour de mon Angulaire $resource par m'oblige à construire l'URL de l'api. Mais c'est OK parce que PDFJS me permet de donner le PDF directement les données, au lieu de donner une URL pour le fichier PDF, comme suit:

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

C'est celle que je n'arrive pas à obtenir de travailler. Je peux dire que les myService.$gtPdf méthode pour renvoyer les données en tant que blob ou comme un arraybuffer mais aucun ne fonctionne. J'ai essayé de convertir le arraybuffer données renvoyées à un Uint8Array trop, mais en vain.

Je ne suis pas sûr de ce que d'autre à essayer et pourrait vraiment utiliser une astuce.

Comment puis-je obtenir les données de retour de mon service fonctionne avec PDFJS?

Merci d'avance.

OriginalL'auteur witttness | 2014-06-18

  1. 19

    Vous n'êtes pas en passant les données de réponse à PDF.js mais une instance de la ressource:

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

    Vous n'avez pas indiqué votre code pour $getPdf, mais je suppose que c'est quelque chose d'équivalent à

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

    Par défaut, un AngularJS $resource traite de la réponse comme un objet (désérialisé de JSON) et des copies de toutes les propriétés de l'objet de l'instance de la ressource (myPdf dans l'extrait précédent).

    Évidemment, car votre réponse est un tableau de la mémoire tampon (ou Blob, tableau typé ou quoi que ce soit), ce n'est pas d'aller travailler. L'une des façons d'obtenir la réponse souhaitée est d'utiliser transformResponse pour envelopper l'objet de la réponse à un objet:

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

    Ou tout simplement la suivante (éviter d'inutiles variables locales):

    myService.$getPdf().$promise.then(function(myPdf) {
    PDFJS.getDocument({
        data: myPdf.data
    }).then(function (pdf) {
        //...
    });
});
    Merci! J'ai pensé que j'avais besoin d'un PDF.JS expert à carillon, mais quelqu'un avec une meilleure Angulaire de la connaissance était vraiment la clé. J'étais déjà à l'aide de transformResponse mais pas correctement puisque j'ai été le traitement de la ressource comme si c'était la réponse. Une fois que vous l'avez souligné, tout est tombé en place.
    Bonjour, que voulez-vous faire avec le fichier pdf dans la .ensuite, chargez le document dans l'viewer.html?
    Si vous voulez l'utiliser avec le standard viewer.html, puis utilisez PDFViewerApplication.open(myPdf);.

    OriginalL'auteur Rob W