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

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

i have requirement webapp implement next behavior:

after webform opened embedded pdf object shown in browser user needs able select text in document ctrl click after selected text copied inputfield in same webform embedded pdf object shown.

are there api's out there (preferably open source) implement behavior? can meet requirement using techniques jsp, jsf, primefaces, javascript or html5 , how that?

in illustration i'll use

pdf.js jsf 2.2 (doesn't matter version, it's improve 2.x) primefaces (for inputfield or textarea) * optional

steps:

downloading , integrating pdf.js register event on ctrl downloading , integrating pdf.js

download pdf.js, after download finish unzip it, see next folder hierarchy

. ├── 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

assuming have jsf project resources folder within webapp, re-create next files web folder (from unziped file) resources in :

webapp/resources folder

├── css │   └── viewer.css (web/viewer.css) ├── images │   └── pdfjs │   ├── ** images within (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)

edit viewer.css resolve required images, replace each url

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

here's total resolved viewer.css

create xhtml file content of viewer.html (web/viewer.html zip), represent viewer markup, reason i'de utilize viewer html 5 markup ability select text, not canvas example

here's total copied illustration of viewer.html viewer.xhml

notice in end i've included libraries in next order:

class="lang-xhtml prettyprint-override"><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" />

to pdf.js running need specify 2 things, pdf.worder.js location , pdfurl (see in viewer.xhml)

class="lang-javascript prettyprint-override"> <script> var default_url = "#{pdfurl}"; //pdf should hosted on domain name (ajaxly loaded) pdfjs.workersrc = "#{resource['js/pdfjs/pdf.worker.js']}"; </script> register event on ctrl

define inputtext or inputtextarea

class="lang-xhtml prettyprint-override"><p:inputtextarea id="inputtextarea" />

now register event of keydown or whatever fit, example:

class="lang-javascript prettyprint-override"> $('.pdfzone').keydown(function(event) { if (event.which == "17"){ // ctrl key $('#inputtextarea').text(window.getselection().tostring()) } });

.pdfzone div container of pdf viewer

you can find total illustration on github [1] [2], , an online demo.

note: didn't utilize ctrl + click because in mac osx trigger right click, anyhow alter event handling.

suggestion utilize ctrl + click (but demo utilize ctrl)

class="lang-javascript prettyprint-override"> $('.pdfzone').on('mouseup',function(e) { if (e.ctrlkey) { $('#inputtextarea').text(window.getselection().tostring()); } });

javascript jsf pdf acrobat acrobat-sdk