PDF.js librería Javascript para leer PDF en Canvas

Interesante librería Javascript que nos permite mostrar en Canvas (HTML5) el contenido de un PDF. Puede venir muy bien para aplicaciones móviles, ya que en navegación en escritorio normalmente la gente tiene instalado un visor de PDFs.
<html>
<head>
  <title>Simple pdf.js page viewer</title>
  <script type="text/javascript"
          src="pdf.js"></script>
  <style type"text/css">
body {
  margin: 6px;
  padding: 0px;
  background-color: #c0bdb7;
}
#controls {
  border-bottom: 1px solid black;
  position:fixed;
  left: 0px; top: 0px;
  width: 100%;
  padding: 7px;
  background-color: rgb(242, 240, 238);
}
span#info {
  float: right;
  font: 14px sans-serif;
  margin-right: 10px;
}
#viewer {
  margin: auto;
  border: 1px solid black;
  width: 8.5in;
  height: 11in;
}
#pageNumber {
  text-align: right;
}
  </style>
 
<script type="text/javascript">
function queryParams() {
    var qs = window.location.search.substring(1);
    var kvs = qs.split("&");
    var params = { };
    for (var i = 0; i < kvs.length; ++i) {
        var kv = kvs[i].split("=");
        params[unescape(kv[0])] = unescape(kv[1]);
    }
    return params;
}
 
var canvas, numPages, pageDisplay, pageNum;
function load() {
    canvas = document.getElementById("canvas");
    canvas.mozOpaque = true;
    pageDisplay = document.getElementById("pageNumber");
    infoDisplay = document.getElementById("info");
    pageNum = parseInt(queryParams().page) || 1;
    fileName = queryParams().file || "compressed.tracemonkey-pldi-09.pdf";
    open(fileName);
}
 
function open(url) {
    document.title = url;
    req = new XMLHttpRequest();
    req.open("GET", url);
    req.mozResponseType = req.responseType = "arraybuffer";
    req.expected = (document.URL.indexOf("file:") == 0) ? 0 : 200;
    req.onreadystatechange = xhrstate;
    req.send(null);
}
 
function xhrstate() {
    if (req.readyState == 4 & req.status == req.expected) {
        var data = req.mozResponseArrayBuffer ||
                   req.mozResponse ||
                   req.responseArrayBuffer ||
                   req.response;
        pdf = new PDFDoc(new Stream(data));
        numPages = pdf.numPages;
        document.getElementById("numPages").innerHTML = numPages.toString();
        gotoPage(pageNum);
    }
}
 
function displayPage(num) {
    pageDisplay.value = num;
 
    var t0 = Date.now();
 
    var page = pdf.getPage(pageNum = num);
 
    var t1 = Date.now();
 
    var ctx = canvas.getContext("2d");
    ctx.save();
    ctx.fillStyle = "rgb(255, 255, 255)";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.restore();
 
    var gfx = new CanvasGraphics(ctx);
 
    // page.compile will collect all fonts for us, once we have loaded them
    // we can trigger the actual page rendering with page.display
    var fonts = [];
    page.compile(gfx, fonts);
 
    var t2 = Date.now();
 
    // This should be called when font loading is complete
    page.display(gfx);
 
    var t3 = Date.now();
 
    infoDisplay.innerHTML = "Time to load/compile/render: "+ (t1 - t0) + "/" + (t2 - t1) + "/" + (t3 - t2) + " ms";
}
 
function nextPage() {
    if (pageNum < numPages)
        ++pageNum;
    displayPage(pageNum);
}
 
function prevPage() {
    if (pageNum > 1)
        --pageNum;
    displayPage(pageNum);
}
function gotoPage(num) {
    if (0 <= num & num <= numPages)
        pageNum = num;
    displayPage(pageNum);
}
  </script>
</head>
 
<body onload="load();">
  <div id="controls">
    <button onclick="prevPage();">Previous</button>
    <button onclick="nextPage();">Next</button>
    <input type="text" id="pageNumber" onchange="gotoPage(this.value);"
           value="1" size="4"></input>
    / <span id="numPages">--</span>
    <span id="info"></span>
  </div>
  <div id="viewer">
    <!-- Canvas dimensions must be specified in CSS pixels.  CSS pixels
      -- are always 96 dpi.  These dimensions are 8.5x11in at 96dpi. -->
    <canvas id="canvas" width="816" height="1056"></canvas>
  </div>
</body>
 
</html>
PDF.js
Vía / @badass_js