Question

我要求webapp实现以下行为：

打开webform后，浏览器中显示嵌入的PDF对象，用户需要能够使用 ctrl + 鼠标单击之后，所选文本将复制到显示嵌入PDF对象的同一webform中的输入字段。

是否存在实现此行为的API（最好是开源）？我可以使用JSP，JSF，PrimeFaces，Javascript或HTML5等技术来满足此要求吗？我该怎么做？

Answer 1

在示例中我将使用

PDF.js
JSF 2.2（真正重要的是什么版本，但最好是2.x）
PrimeFaces（用于inputField或textArea）* 可选

步骤：

下载和集成PDF.js
在CTRL上注册活动

下载和集成PDF.js

Download 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

假设您在resources内有一个webapp文件夹的JSF项目，请将以下文件从网络文件夹（从解压缩文件）复制到resources，在这些文件中它们看起来像这样：

webapp / resources 文件夹

├── 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文件（来自zip的web / viewer.html），这将代表查看器标记，我使用所有html 5标记的查看器的原因是能力选择文字，而不是canvas only example

以下是viewer.html到viewer.xhml

的完整复制示例

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

<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.xhml）

 <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 div

的viewer容器

您可以在github上找到完整示例[1] [2]，在线 Demo。

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

建议使用CTRL + Click（但演示只使用CTRL）

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

如何实现ctrl单击行为以从webapp中的嵌入式pdf复制文本？

1 个答案:

下载和集成PDF.js

在CTRL上注册事件