Que por mayo era por mayo… cuando vimos cómo incrustar un pdf dentro de un sitio web usando HTML5. ¿El problema? Que requiere que el navegador tenga una extensión para visualizar este formato, cosa que puede resultar problemática con algunos dispositivos móviles, por ejemplo. ¿Alternativas? Pues Mozilla nos proporciona una: pdf.js
Existen más librerías, pero la de Mozilla es software libre, funciona en todos los navegadores modernos y no experimenta problemas graves ni de seguridad ni de rendimiento.
¿Cómo sería el marcado HTML para empezar? Pues algo así:
<script src="//mozilla.github.io/pdf.js/build/pdf.js"></script>
<h1>EJEMPLO DE PDF.JS</h1>
<canvas id="canvas_pdf"></canvas>
Básicamente son indispensables dos elementos: la línea donde cargamos la ruta de la librería y una etiqueta canvas dentro de la que se cargará el pdf, con un id definido para trabajar con ella cómodamente.
¿El necesario código javascript?
// Primero ponemos la ruta del fichero pdf.
var url = '//nuestraruta/fichero.pdf';
// Debemos especificar la ruta de worker.js (en este caso será la de github)
PDFJS.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.js';
// Carga del pdf asíncrona
var loadingTask = PDFJS.getDocument(url);
loadingTask.promise.then(function(pdf) {
console.log('PDF cargado');
// Carga la primera página
var pageNumber = 1;
pdf.getPage(pageNumber).then(function(page) {
console.log('Page loaded');
var scale = 1.5;
var viewport = page.getViewport(scale);
// Prepara el cambas según el tamaño que definimos en las variables
//scale y viewport
var canvas = document.getElementById('canvas_pdf');
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
// Pinta el PDF en el canvas
var renderContext = {
canvasContext: context,
viewport: viewport
};
var renderTask = page.render(renderContext);
renderTask.then(function () {
console.log('Todo Correcto');
});
});
}, function (reason) {
// Pinta el error en casode que se de
console.error(reason);
});
DonnierocK 