javascript - Pdf.js: representación de un archivo pdf utilizando un origen de archivo base64 en lugar de url
canvas (3)
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;
},
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?
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)
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í.