如何实现ctrl点击行为，以复制文本从嵌入pdf在web应用程序

How to implement ctrl click behavior to copy text from an embedded pdf in a webapp?

本文关键字：文本 复制 应用程序 web pdf 实现 何实现 ctrl      更新时间：2023-09-26

我有一个web应用程序实现以下行为的要求:

在浏览器中显示带有嵌入式PDF对象的web表单打开后，用户需要能够使用ctrl + 鼠标单击选择文档中的文本，然后将所选文本复制到显示嵌入式PDF对象的同一web表单中的输入字段中。

是否有API(最好是开源的)实现这种行为?我是否可以使用JSP、JSF、PrimeFaces、Javascript或HTML5等技术来满足这一需求?我该如何做到这一点?

在本例中，我将使用

  • PDF.js
  • JSF 2.2(什么版本并不重要，但最好是2.x)
  • PrimeFaces(用于inputField或textArea) * 可选

步骤:

  • 下载并集成PDF.js
  • 按CTRL注册事件

下载并集成PDF.js

下载PDF.js，下载完成后解压缩，您会看到以下文件夹层次

.
 ├── LICENSE
 ├── build
 │   ├── pdf.js
 │   └── pdf.worker.js
 └── web
     ├── cmaps/
     ├── compatibility.js
     ├── compressed.tracemonkey-pldi-09.pdf
     ├── debugger.js
     ├── images/
     ├── l10n.js
     ├── locale/
     ├── viewer.css
     ├── viewer.html
     └── viewer.js

假设您有一个JSF项目，在webapp中有一个resources文件夹，将以下文件从web文件夹(从解压缩文件)复制到resources中，其中它们看起来像这样:

<<p> webapp/资源/strong>文件夹
├── css
│   └── viewer.css (web/viewer.css)
├── images
│   └── pdfjs
│       ├── ** All the images inside (web/images)
└── js
   └── pdfjs
       ├── compatibility.js (web/compatibility.js)
       ├── l10n.js (web/l10n.js)
       ├── pdf.js (web/pdf.js)
       ├── pdf.worker.js (web/pdf.worker.js)
       └── viewer.js (web/viewer.js)

编辑viewer.css以解析所有所需的图像，将每个url替换为

"#{resource['images/pdfjs/correspondingImageName']}"

这是一个完全解析的viewer.css

创建内容为viewer.html的xhtml文件(web/viewer.html from zip)，它将表示查看器标记，我将查看器与所有html 5标记一起使用的原因是能够选择文本，而不像画布示例

这是一个完整复制到viewer. xhtml中的viewer.html示例

注意，最后我按以下顺序包含了这些库:

<h:outputScript name="js/pdfjs/compatibility.js" target="head" /> 
<h:outputScript name="js/pdfjs/l10n.js" target="head" />
<h:outputScript name="js/pdfjs/pdf.js" target="head" />  
<h:outputScript name="js/pdfjs/viewer.js" target="head" />

要使PDF.js运行，您需要指定两件事，pdf.worder.js的位置和pdfURL(参见viewer. xhtml)

 <script>
     var DEFAULT_URL = "#{pdfURL}"; //pdf should be hosted on your domain name (ajaxly loaded) 
     PDFJS.workerSrc = "#{resource['js/pdfjs/pdf.worker.js']}";
 </script>

按CTRL注册事件

定义inputText或inputTextArea 

<p:inputTextarea id="inputTextArea" />

现在注册一个keydown或其他合适的事件，例如:

 $('.pdfZone').keydown(function(event) {
    if (event.which == "17"){ // CTRL key
       $('#inputTextArea').text(window.getSelection().toString())
     }                 
 });

.pdfZone是pdf viewer的div容器

你可以在github[1][2]上找到一个完整的例子，是一个在线的演示。

注意:我没有使用CTRL + Click，因为在我的Mac OSX中会触发右键单击，无论如何你可以改变事件处理。

建议使用CTRL + Click(但演示将只使用CTRL)

 $('.pdfZone').on('mouseup',function(e) {                       
    if (e.ctrlKey) {
       $('#inputTextArea').text(window.getSelection().toString());
     }
 });
相关文章：