Javascript 使用PDF.js将链接、超链接导入画布

我正在使用PDF.js库将PDF渲染到画布中。pdf中有超链接，pdf.js库正在将pdf绘制到画布中，但超链接不起作用

你知道超链接是否能进入画布吗

Thank

是一款小提琴，它向您展示了如何在PDF文件中启用注释（包括超链接）。 小提琴中使用的原始PDF文件是

我使用查看器代码（，）作为参考来编写此小提琴

HTML:

CSS:

正文{
字体系列：arial，verdana，无衬线；
}
.pdf内容{
边框：1px实心#000000；
}
.annotationLayer>a{
显示：块；
位置：绝对位置；
}
.annotationLayer>a:悬停{
不透明度：0.2；
背景：#ff0；
盒影：0px 2px 10px#ff0；
}
.annotText>div{
z指数：200；
位置：绝对位置；
填充：0.6em；
最大宽度：20em；
背景色：#FFFF99；
盒影：0px 2px 10px#333；
边界半径：7px；
}
.annotText>img{
位置：绝对位置；
不透明度：0.6；
}
.annotText>img:悬停{
不透明度：1；
}
.annotText>div>h1{
字体大小：1.2米；
边框底部：1px实心#000000；
边际：0px；
}

JavaScript：

PDFJS.workerSrc='1http://seikichi.github.io/tmp/PDFJS.0.8.715/pdf.min.worker.js';
$（函数（）{
var pdfData=loadPDFData（）；
getDocument（pdfData）.then（函数（pdf）{
返回pdf.getPage（1）；
}).then（功能）（第页）{
var量表=1；
var viewport=page.getViewport（比例）；
var$canvas=$（“#画布”）；
var canvas=$canvas.get（0）；
var context=canvas.getContext（“2d”）；
canvas.height=viewport.height；
canvas.width=viewport.width；
var$pdfContainer=$（“#pdfContainer”）；
$pdfContainer.css（“height”，canvas.height+“px”）
.css（“宽度”，canvas.width+“px”）；
var renderContext={
背景：背景，
视口：视口
};
page.render（renderContext）；
设置注释（页面、视口、画布，$（'.annotationLayer'）；
});
函数设置注释（页面、视口、画布、$annotationLayerDiv）{
var canvasOffset=$（canvas.offset（）；
var promise=page.getAnnotations（）.then（函数（annotationsData）{
viewport=viewport.clone({
dontFlip:是的
});
对于（变量i=0；i

在PDF.JS中启用文本选择

---

步骤1：添加元素以保存文本层

此div将添加到呈现PDF的元素中，因此HTML将如下所示：

步骤2：为文本层添加CSS 将以下内容添加到CSS文件：

#文本层{
位置：绝对位置；
左：0；
排名：0；
右：0；
底部：0；
溢出：隐藏；
不透明度：0.2；
线高：1.0；
}
#文本层>div{
颜色：透明；
位置：绝对位置；
空白：预处理；
光标：文本；
变换原点：0%0%；
}

步骤3：获取PDF文本 在画布中呈现PDF后，需要获取PDF的文本内容，并将该文本放置在文本层中

//页面是PDF页面的页面上下文
//视口是renderContext中所需的视口
//欲了解更多信息，请参阅https://usefulangle.com/post/20/pdfjs-tutorial-1-preview-pdf-during-upload-wih-next-prev-buttons    
render（renderContext）.then（function（）{
//返回承诺，解析时将返回页面的文本内容
返回page.getTextContent（）；
}).then（函数（文本内容）{
//PDF画布
var pdf#u canvas=$（“#pdf canvas”）；
//帆布胶印
var canvas_offset=pdf_canvas.offset（）；
//帆布高度
var canvas_height=pdf_canvas.get（0）.height；
//画布宽度
var canvas_width=pdf_canvas.get（0）.width；
//将CSS指定给文本层元素
$（“#文本层”）.css（{left:canvas_offset.left+'px'，top:canvas_offset.top+'px'，height:canvas_height+'px'，width:canvas_width+'px'）；
//将数据传递给rend的方法