PDF.js et le spectateur.js. Passer un flux ou un blob au spectateur

j'utilise PDFJS.version = '1.0.1040'; PDFJS.build = '997096f';

Le code qui a fonctionné pour moi d'obtenir base64 pdf données chargées était ceci:

function (base64Data) {
  var pdfData = base64ToUint8Array(base64Data);
  PDFJS.getDocument(pdfData).then(function (pdf) {
    pdf.getPage(1).then(function (page) {
      var scale = 1;
      var viewport = page.getViewport(scale);
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      canvas.height = viewport.height;
      canvas.width = viewport.width;
      page.render({ canvasContext: context, viewport: viewport });
    });
  });

  function base64ToUint8Array(base64) {
    var raw = atob(base64);
    var uint8Array = new Uint8Array(raw.length);
    for (var i = 0; i < raw.length; i++) {
      uint8Array[i] = raw.charCodeAt(i);
    }
    return uint8Array;
  }
}

cette fonction pourrait être la fonction de succès d'une promesse d'appel api. Ce que je fais ici c'est rendre le pdf sur un élément de toile myCanvas.

<canvas id="myCanvas"></canvas>

ceci montre la première page du pdf mais n'a aucune fonctionnalité. Je vois pourquoi le spectateur est désirable. Si je l'accroche au spectateur (viewer.HTML / viewer.js) je vais modifier mon réponse.

EDIT: Comment faire pour accrocher le spectateur

1bower.json, ajouter "pdfjs-viewer": "1.0.1040"

2 Html:

<iframe id="pdfViewer" src="lib/pdfjs-viewer/web/viewer.html" style="width: 100%; height: 700px;" allowfullscreen="" webkitallowfullscreen=""></iframe>

3 changez le document stupide par défaut dans le viewer.js fichier:

var DEFAULT_URL = '';

4 Contrôleur:

var pdfjsframe = document.getElementById('pdfViewer');
pdfjsframe.onload = function() {
  LoadPdfDocument();
};

$scope.myApiCallThatReturnsBase64PdfData.then(
  function(base64Data) {
    $scope.base64Data = base64Data;
    LoadPdfDocument();
  },
  function(failure) {

    //NotificationService.error(failure.Message);

  });

function LoadPdfDocument() {
  if ($scope.PdfDocumentLoaded)
    return;
  if (!$scope.base64Data)
    return;

  var pdfData = base64ToUint8Array($scope.base64Data);
  pdfjsframe.contentWindow.PDFViewerApplication.open(pdfData);

  $scope.PdfDocumentLoaded = true;
}

function base64ToUint8Array(base64) {
  var raw = atob(base64);
  var uint8Array = new Uint8Array(raw.length);
  for (var i = 0; i < raw.length; i++) {
    uint8Array[i] = raw.charCodeAt(i);
  }
  return uint8Array;
}

Si vous avez un tableau dactylographié (par exemple un Uint8Array), alors le fichier peut être ouvert en utilisant PDFView.open(typedarray, 0);.

Si vous avez un Blob ou File objet, les données doit être converti en un tableau typé avant de pouvoir l'afficher:

var fr = new FileReader();
fr.onload = function() {
    var arraybuffer = this.result;
    var uint8array = new Uint8Array(arraybuffer);
    PDFView.open(uint8array, 0);
};   
fr.readAsArrayBuffer(blob);

une autre méthode consiste à créer une URL pour l'objet Blob/File:

var url = URL.createObjectURL(blob);
PDFView.open(url, 0);

si le visualiseur PDF est hébergé au origine comme votre site web qui intègre le cadre, alors vous pouvez également voir le PDF par passage de la goutte d'URL pour le spectateur:

var url = URL.createObjectURL(blob);
var viewerUrl = 'web/viewer.html?file=' + encodeURIComponent(url);
// TODO: Load the PDF.js viewer in a frame or new tab/window.

var url = URL.createObjectURL(blob);

var viewerUrl = 'web/viewer.html?file=' + encodeURIComponent(url);

// TODO: Load the PDF.js viewer in a frame or new tab/window.

//-- Abobe code opens a new window but with errors : 'Missing PDF 
// blob://http://server-addr:port/converted-blob'