mozilla の pdf.js を使用してサンプル PDF ファイルを表示することができました。PDF ファイルの 1 ページ目には、2 ページ目への内部リンクが 1 つと、google.com への外部リンクが 1 つ含まれています。
次のステップは、サンプル 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
});
});
});
#pdf-holder {
width: 100%;
height: auto;
<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>