javascript 使用 Pdf.js 突出显示 pdf 中的一个部分
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/11438240/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Highlight a section inside pdf using Pdf.js
提问by Viren
I'm currently using pdf.js for my project for rendering pdf Now there is this tricky task to highlight a section of pdf page given the co-ordinate
我目前正在为我的项目使用 pdf.js 来渲染 pdf 现在有一个棘手的任务来突出显示给定坐标的 pdf 页面的一部分
example
例子
given a boundary section like [(31,35),(40,35),(40,40),(31,40)]
I should highlight the given section with nay primary color of choice
给定一个边界部分,比如[(31,35),(40,35),(40,40),(31,40)]
我应该用不选择的原色突出显示给定的部分
How to write a javascript to actually using pdf.js api to accomplish this task
如何编写 javascript 以实际使用 pdf.js api 来完成此任务
Is it possible or am I sounding over ambitions
有可能吗,还是我在吹嘘自己的野心
采纳答案by Viren
I found a better way to achieve this find the co-ordinate of the point in the html page
我找到了一个更好的方法来实现这个在 html 页面中找到点的坐标
and then subtract the co-ordinate(position) of div.textLayer
from it to find the co-ordinate
然后div.textLayer
从中减去的坐标(位置)以找到坐标
of the text in the pdf displayed online.
在线显示的 pdf 中的文本。
In order to find the co-ordinate of the text in actual pdf find the aspect ratio and you would
为了找到实际pdf中文本的坐标,找到纵横比,你会
get the actual co-ordinate
获取实际坐标
example
例子
if the pdf displayed online is 800x900
and the text co-ordinate
如果在线显示的pdf是800x900
和文本坐标
[(31,35),(40,35),(40,40),(31,40)]
[(31,35),(40,35),(40,40),(31,40)]
and the actual pdf size is 612x792
实际的pdf大小是 612x792
find the appropriate value of the area in actual pdf like this
像这样在实际的pdf中找到该区域的适当值
(612/(800 / 31)),(792/(900/35))
(612/(800 / 31)),(792/(900/35))
and do this way for all co-ordinate found in online
并对在线找到的所有坐标执行此操作
i.e
IE
(40,35),(40,40),(31,40)
(40,35),(40,40),(31,40)
NOTE: -
笔记: -
Might want to check the PDF.js API called convertToPdfPoint
可能想要检查名为convertToPdfPoint的 PDF.js API
回答by Daniel Li
One of the authors for PDF.js, cjones
, has stated:
PDF.js 的其中一位作者,cjones
,曾表示:
No, and that's (highlighting) not like something we would add to pdf.js. That ought to be easy to layer on top of pdf.js.
No, and that's (highlighting) not like something we would add to pdf.js. That ought to be easy to layer on top of pdf.js.
Source: http://blog.mozilla.org/cjones/2011/07/03/pdf-js-first-milestone/
来源:http: //blog.mozilla.org/cjones/2011/07/03/pdf-js-first-milestone/
You will need to implement it yourself if you are interested in using this functionality.
如果您有兴趣使用此功能,则需要自己实现它。
回答by ingenuine
If selecting text could be sufficient for your needs, you might find an entry for your solution in SO about highlighting text in PDF.js.
如果选择文本足以满足您的需求,您可能会在SO 中找到有关在 PDF.js 中突出显示文本的解决方案条目。
The text is selected via document.getSelection()
.
文本是通过 选择的document.getSelection()
。
Adjustment for color as you said can be accomplished by using
您所说的颜色调整可以通过使用来完成
<span style="yourColorDefinition">
instead of
代替
<span class="hightlight">