7

I'm trying to use pdf.js to display pdfs. I already can display a pdf, but text selection isn't enabled. Can somebody give a small example on how to enable text selection in pdf.js?

I already tried several things, but without any success.

my code currently looks like this:

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 renders the pdf, but text selection isn't enabled. I guess I am really missing some basic knowledge about pdf.js, but its hard to get some good example since the documentation isn't that good (at least for me).

I also tried out this example here but the console is throwing an error and keep saying new PDFJS.DefaultAnnotationsLayerFactory() is undefined.

4

2 回答 2

2

我花了一些时间，但它终于奏效了。这里有一些非常好的例子。它来自官方回购（是的，我没有找到它们）。

对于任何有兴趣的人，这就是我所做的（不知道您是否真的需要执行第 2 步和第 3 步，我只是粘贴了对我有用的示例）：

1.克隆git repo

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

  1. 进入文件夹并运行npm install，然后node make server（如果你还没有安装 node.js，你必须先安装）

  2. 运行node make generic components（也在 pdf.js 文件夹内）

现在您可以复制build项目中的目录（如果您喜欢使用它们而不是创建 viewer.js，也可以将文件夹 exapmle/components 中的 slideviewer.js 或 pageviewer.js 复制到您的项目中）。我的错是只将 pdf.js 和其他一些 js 复制到我的项目中。由于缺少该构建文件夹中的一些其他 js 文件，它不断抛出错误。

于 2015-07-18T19:27:50.403 回答
1

详细说明如何在 minimum.js 标题评论中执行此操作。

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

我过去尝试过这个例子，它对我有用。

于 2015-07-18T16:58:20.603 回答