web-dev-qa-db-fra.com

Pdf.js: rendu un fichier pdf en utilisant un fichier source base64 au lieu de l'url

J'essaye de rendre une page d'un pdf avec pdf.js

Normalement, en utilisant une URL, je peux faire ceci:

PDFJS.getDocument("http://www.server.com/file.pdf").then(function getPdfHelloWorld(pdf) {
  //
  // Fetch the first page
  //
  pdf.getPage(1).then(function getPageHelloWorld(page) {
    var scale = 1.5;
    var viewport = page.getViewport(scale);

    //
    // Prepare canvas using PDF page dimensions
    //
    var canvas = document.getElementById('the-canvas');
    var context = canvas.getContext('2d');
    canvas.height = viewport.height;
    canvas.width = viewport.width;

    //
    // Render PDF page into canvas context
    //
    page.render({canvasContext: context, viewport: viewport});
  });
});

Mais dans ce cas, j'ai le fichier en base64 plutôt que l'URL:

data:application/pdf;base64,JVBERi0xLjUKJdDUxdgKNSAwIG9iaiA8PAovTGVuZ3RoIDE2NjUgICAgICAKL0ZpbHRlciAvRmxhdGVEZWNvZGUKPj4Kc3RyZWFtCnjarVhLc9s2...

Comment cela peut être fait?

javascriptpdfcanvasbase64pdf.js
63
Alex

depuis le code source à l'adresse http://mozilla.github.com/pdf.js/build/pdf.js

/**
 * This is the main entry point for loading a PDF and interacting with it.
 * NOTE: If a URL is used to fetch the PDF data a standard XMLHttpRequest(XHR)
 * is used, which means it must follow the same Origin rules that any XHR does
 * e.g. No cross domain requests without CORS.
 *
 * @param {string|TypedAray|object} source Can be an url to where a PDF is
 * located, a typed array (Uint8Array) already populated with data or
 * and parameter object with the following possible fields:
 *  - url   - The URL of the PDF.
 *  - data  - A typed array with PDF data.
 *  - httpHeaders - Basic authentication headers.
 *  - password - For decrypting password-protected PDFs.
 *
 * @return {Promise} A promise that is resolved with {PDFDocumentProxy} object.
 */

Ainsi, un XMLHttpRequest (XHR) standard est utilisé pour récupérer le document. Le problème avec ceci est que XMLHttpRequests ne supporte pas les données: uris (par exemple, les données: application/pdf; base64, JVBERi0xLjUK ...).

Mais il existe la possibilité de passer un tableau Javascript typé à la fonction. La seule chose à faire est de convertir la chaîne base64 en Uint8Array. Vous pouvez utiliser cette fonction à l'adresse https://Gist.github.com/1032746

var BASE64_MARKER = ';base64,';

function convertDataURIToBinary(dataURI) {
  var base64Index = dataURI.indexOf(BASE64_MARKER) + BASE64_MARKER.length;
  var base64 = dataURI.substring(base64Index);
  var raw = window.atob(base64);
  var rawLength = raw.length;
  var array = new Uint8Array(new ArrayBuffer(rawLength));

  for(var i = 0; i < rawLength; i++) {
    array[i] = raw.charCodeAt(i);
  }
  return array;
}

tl; dr 

var pdfAsDataUri = "data:application/pdf;base64,JVBERi0xLjUK..."; // shortened
var pdfAsArray = convertDataURIToBinary(pdfAsDataUri);
PDFJS.getDocument(pdfAsArray)
92
Codetoffel

Selon les exemples le codage base64 est directement pris en charge, bien que je ne l’aie pas testé moi-même. Prenez votre chaîne base64 (dérivée d'un fichier ou chargée avec une autre méthode, POST/GET, websockets, etc.), transformez-la en un binaire avec atob, puis analysez-la pour obtenirDocument sur l'API PDFJS commePDFJS.getDocument({data: base64PdfData}); Codetoffel La réponse ne fonctionne pas très bien pour moi cependant.

2
Uzer

Utilisez la réponse acceptée pour vérifier IE et convertissez l'URI de données en UInt8Array; un formulaire accepté par PDFJS

        Ext.isIE ? pdfAsDataUri = me.convertDataURIToBinary(pdfAsDataUri): '';

        convertDataURIToBinary: function(dataURI) {
          var BASE64_MARKER = ';base64,',
            base64Index = dataURI.indexOf(BASE64_MARKER) + BASE64_MARKER.length,
            base64 = dataURI.substring(base64Index),
            raw = window.atob(base64),
            rawLength = raw.length,
            array = new Uint8Array(new ArrayBuffer(rawLength));

          for (var i = 0; i < rawLength; i++) {
            array[i] = raw.charCodeAt(i);
          }
          return array;
        },
0
Akin Okegbile