0

我需要一个 webapp 来实现以下行为：

在浏览器中显示带有嵌入 PDF 对象的 Web 表单后，用户需要能够使用ctrl+选择文档中的文本mouse click，然后将所选文本复制到与嵌入 PDF 对象相同的 Web 表单中的输入字段显示。

是否有实现此行为的 API（最好是开源的）？我可以使用 JSP、JSF、PrimeFaces、Javascript 或 HTML5 等技术来满足这一要求吗？我将如何做到这一点？

4

1 回答 1

3

在示例中，我将使用

  • 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 项目，其中包含一个resources文件夹webapp，请将以下文件从 web 文件夹（从解压缩文件中）复制到resources其中，它们看起来像这样：

webapp/资源文件夹

├── 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使用(web/viewer.html from zip)的内容创建 xhtml 文件，这将代表查看器标记，我使用带有所有 html 5 标记的查看器的原因是能够选择文本，而不是像画布唯一的例子

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是divpdf的容器viewer

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

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

建议使用 CTRL + 单击（但演示仅使用 CTRL）

 $('.pdfZone').on('mouseup',function(e) {                       
    if (e.ctrlKey) {
       $('#inputTextArea').text(window.getSelection().toString());
     }
 });
于 2014-06-27T16:50:16.197 回答