使用pdf.js显示注释/超链接

Loz*_*zza 5 javascript html5 html5-canvas pdf.js pdfjs

我设法使用mozilla的pdf.js显示了一个PDF示例文件。在PDF文件的第一页上,有一个内部链接指向第2页,一个外部链接指向google.com。

我的下一步是使示例PDF中的链接有效(可单击),而我为此感到困惑。

目前,我所能做的就是获取链接/注释并将其打印到控制台。谁能帮助我将这些链接呈现到注释div层?

我浏览了pdf.js文档,但找不到所需的内容...我只是想将此可点击链接功能添加到下面的简单代码中。

这是到目前为止我的进步的代码笔: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
    });

  });

});
Run Code Online (Sandbox Code Playgroud)
#pdf-holder {
  width: 100%;
  height: auto;
Run Code Online (Sandbox Code Playgroud)
<script src="http://mozilla.github.io/pdf.js/build/pdf.js"></script>

<div id="pdf-holder">
  <canvas id="pdf-canvas"></canvas>
  <div id="annotation-layer"></div>
</div>
Run Code Online (Sandbox Code Playgroud)