javascript - Pdf.js: representación de un archivo pdf utilizando un origen de archivo base64 en lugar de url

canvas

Question

Estoy tratando de renderizar una página desde un pdf con pdf.js

Normalmente, usando una url, puedo hacer esto:

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

Pero en este caso, tengo el archivo en base64 en lugar de una url:

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

¿Cómo se puede hacer esto?

Answer 1

Usó la Respuesta Aceptada para verificar IE y convertir el URL de datos a UInt8Array; una forma aceptada por 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;
},

Answer 2

del código fuente en 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.
*/

Por lo tanto, se utiliza un estándar XMLHttpRequest (XHR) para recuperar el documento. El problema con esto es que XMLHttpRequests no admite datos: uris (por ejemplo, datos: application / pdf; base64, JVBERi0xLjUK ...).

Pero existe la posibilidad de pasar una matriz de Javascript tipada a la función. Lo único que debe hacer es convertir la cadena base64 a Uint8Array. Puede usar esta función que se encuentra en 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)

Answer 3

De acuerdo con los ejemplos, la codificación base64 es compatible directamente, aunque yo mismo no la he probado. Tome su cadena base64 (derivada de un archivo o cargada con cualquier otro método, POST / GET, websockets, etc.), conviértala en un binario con atob, y luego analice esto en getDocument en la API de PDFJS.getDocument({data: base64PdfData}); como PDFJS.getDocument({data: base64PdfData}); Sin embargo, la respuesta de Codetoffel funciona bien para mí.