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)
| 归档时间: |
|
| 查看次数: |
4962 次 |
| 最近记录: |