Display annotations / hyperlinks with pdf.js

Question

I was able to display a sample PDF file using mozilla pdf.js. The first page of the PDF file has one internal link to page 2 and one external link to google.com.

My next step is to get links in a PDF sample to work (be clickable), and I'm struggling with that.

For now, all I can do is get the links / annotations and print them to the console. Can someone help me pass these links to a div annotation layer?

I looked through the pdf.js docs but I cannot find what I am looking for ... I just want to add this click link function using the simple code below.

Here is the code for my progress: http://codepen.io/laurencemeah/pen/ONrJXj

var pdfFile = 'URL PATH TO PDF FILE';
var pageNum = 1;

PDFJS.getDocument(pdfFile).then(function(pdf) {

  pdf.getPage(pageNum).then(function(page) {
    var desiredWidth = document.getElementById('pdf-holder').getBoundingClientRect().width;
    var viewport = page.getViewport(1);
    var scale = desiredWidth / viewport.width;
    var scaledViewport = page.getViewport(scale);

    var canvas = document.getElementById('pdf-canvas');
    var context = canvas.getContext('2d');
    canvas.height = scaledViewport.height;
    canvas.width = scaledViewport.width;

    var renderContext = {
      canvasContext: context,
      viewport: scaledViewport
    };

    page.render(renderContext);

    page.getAnnotations().then(function(data) {
      console.log(data);
      // now display them in annotation layer div
    });

  });

});

#pdf-holder {
  width: 100%;
  height: auto;

<script src="http://mozilla.imtqy.com/pdf.js/build/pdf.js"></script>

<div id="pdf-holder">
  <canvas id="pdf-canvas"></canvas>
  <div id="annotation-layer"></div>
</div>

Run codeHide result