javascript pdf canvas base64 pdf.js

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í.