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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-26 13:12:53  来源:igfitidea点击:

Highlight a section inside pdf using Pdf.js

javascriptpdfpdf.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.textLayerfrom 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 800x900and 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">