Geek Answers Handbook

How to enable text selection in PDF.js

I am trying to use pdf.js to display pdf files. I can already display pdf, but text selection is not enabled. Can someone give a small example of how to enable text selection in pdf.js?

I have already tried a few things, but without any success.

Currently my code is as follows:

PDFJS.getDocument('someRandom.pdf').then(function(pdf){ pdf.getPage(1).then(function(page) { // you can now use *page* here var scale = 1.5; var viewport = page.getViewport(scale); var canvas = document.getElementById('the-canvas'); var context = canvas.getContext('2d'); canvas.height = viewport.height; canvas.width = viewport.width; var renderContext = { canvasContext: context, viewport: viewport }; page.render(renderContext); }); });

I also included this:

 <script src="../pdfjs/pdf.js"></script> <script>PDFJS.workerSrc ="../pdfjs/pdf.worker.js"</script>

This example displays a PDF, but text selection is not enabled. I think that I really lack basic knowledge of pdf.js, but it’s hard to get a good example, since the documentation is not so good (at least for me).

I also tried this example here but the console throws an error and keeps saying new PDFJS.DefaultAnnotationsLayerFactory() - undefined.

+5
source share
2 answers

It took me a while, but it finally worked. There are some really good examples here . This is from the official repo (yes, I didn’t find them badly).

For everyone who is interested, this is what I did (I don’t know if you really need to do steps 2 and 3, I just paste the example that worked for me):

1.click git repo

 git clone git://github.com/mozilla/pdf.js.git

  1. go into the folder and run npm install and then node make server (If you did not install node.js, you should do this first)

  2. run node make generic components (also inside the pdf.js folder)

Now you can simply copy the build directory inside your project (you can also copy slideviewer.js or pageviewer.js files from the exapmle / components folder to your project if you want to use them instead of creating your viewer.js). My mistake was to copy only pdf.js and some other js into my project. He continued to throw errors due to the absence of some other js files from this collection folder.

+2
source

A detailed explanation of how to do this in the minimal.js header elements.

https://github.com/vivin/pdfjs-text-selection-demo/blob/master/js/minimal.js

I tried this example in the past and it worked for me.

0
source

More articles:


All Articles