Añadir un pdf a un sitio web usando la librería pdf.js

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"&gt;</script&gt;

<h1&gt;EJEMPLO DE PDF.JS</h1&gt;

<canvas id="canvas_pdf"&gt;</canvas&gt;

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

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.