pdf.js с выбором текста

Как сделать текст в PDF доступным?pdf.js с выбором текста

Пробовали здесь. PDF не написано хорошо, но текст выбора

https://github.com/mozilla/pdf.js/blob/master/web/text_layer_builder.css 
https://github.com/mozilla/pdf.js/blob/master/web/text_layer_builder.js 

'use strict'; 

PDFJS.getDocument('file.pdf').then(function(pdf){ 
    var page_num = 1; 
    pdf.getPage(page_num).then(function(page){ 
     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 canvasOffset = $(canvas).offset(); 
     var $textLayerDiv = $('#text-layer').css({ 
      height : viewport.height+'px', 
      width : viewport.width+'px', 
      top : canvasOffset.top, 
      left : canvasOffset.left 
     }); 

     page.render({ 
      canvasContext : context, 
      viewport : viewport 
     }); 

     page.getTextContent().then(function(textContent){ 
      var textLayer = new TextLayerBuilder({ 
       textLayerDiv : $textLayerDiv.get(0), 
       pageIndex : page_num - 1, 
       viewport : viewport 
      }); 

      textLayer.setTextContent(textContent); 
      textLayer.render(); 
     }); 
    }); 
}); 

<body> 
    <div> 
    <canvas id="the-canvas" style="border:1px solid black;"></canvas> 
    <div id="text-layer" class="textLayer"></div> 
    </div> 
</body>

источник

2015-10-11 clarkk

http://stackoverflow.com/questions/16775907/is-there-a-minimalistic-pdf-js-sample-that-supports-text-selection?rq=1 не помогает вам? – ChrLipp

попробовали это .. не могу заставить его работать .. это старая версия pdf.js – clarkk

Ваш код javascript является идеальным. Вам просто нужно включить утилиты пользовательского интерфейса, Text Layer Builder зависит от:

https://github.com/mozilla/pdf.js/blob/master/web/ui_utils.js

Или в HTML:

<script src="https://raw.githubusercontent.com/mozilla/pdf.js/master/web/ui_utils.js"></script>

Если запустить свой код (без ui_utils) и проверки debug console, вы увидите ReferenceError: CustomStyle is not defined. A quick search в PDFjs's repo покажет вам, что он определен в ui_utils.js.

Вот мой минимальный, но полный код для справки. Я использую PDFjs демо pdf here. Обратите внимание, что в процессе производства вы не должны ссылаться на raw.github.

<!DOCTYPE html><meta charset="utf-8"> 
<link rel="stylesheet" href="https://raw.githubusercontent.com/mozilla/pdf.js/master/web/text_layer_builder.css" /> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
<script src="https://raw.githubusercontent.com/mozilla/pdf.js/master/web/ui_utils.js"></script> 
<script src="https://raw.githubusercontent.com/mozilla/pdf.js/master/web/text_layer_builder.js"></script> 
<script src="https://mozilla.github.io/pdf.js/build/pdf.js"></script> 
<body> 
    <div> 
    <canvas id="the-canvas" style="border:1px solid black;"></canvas> 
    <div id="text-layer" class="textLayer"></div> 
    </div> 
<script> 
'use strict'; 

PDFJS.getDocument('file.pdf').then(function(pdf){ 
    var page_num = 1; 
    pdf.getPage(page_num).then(function(page){ 
     var scale = 1.5; 
     var viewport = page.getViewport(scale); 
     var canvas = $('#the-canvas')[0]; 
     var context = canvas.getContext('2d'); 
     canvas.height = viewport.height; 
     canvas.width = viewport.width; 

     var canvasOffset = $(canvas).offset(); 
     var $textLayerDiv = $('#text-layer').css({ 
      height : viewport.height+'px', 
      width : viewport.width+'px', 
      top : canvasOffset.top, 
      left : canvasOffset.left 
     }); 

     page.render({ 
      canvasContext : context, 
      viewport : viewport 
     }); 

     page.getTextContent().then(function(textContent){ 
      console.log(textContent); 
      var textLayer = new TextLayerBuilder({ 
       textLayerDiv : $textLayerDiv.get(0), 
       pageIndex : page_num - 1, 
       viewport : viewport 
      }); 

      textLayer.setTextContent(textContent); 
      textLayer.render(); 
     }); 
    }); 
}); 
</script>

источник

2015-10-15 02:47:18 Sheepy

Это красиво .. Благодаря! : D <3 – clarkk

@clarkk В какой версии 'pdf.js' он работает? У меня странное поведение для выделения текста (слишком маленькие области) в версии 1.3.91. Раньше это работало с v1.0.277 –

Это больше не работает, по-видимому, теперь нужно идти, чтобы построить весь зритель. Мне нужен простой 2kb ~ просмотрщик с возможностью выбора текста FTW – Dan

-1

Здравствуйте вы создали холст в содержании HTML.

Canvas не поддерживает выбор текста, поэтому вам нужно изменить холст на другой способ.

источник

2015-10-13 10:46:28 Mitul

текстовый слой не является 'холстом', а его' div' – clarkk

, но это '

' – clarkk

После нескольких часов боролись с этим я нашел эту статью очень полезно о выборе текста и использования pdf.js без узла. Custom PDF Rendering in JavaScript with Mozilla’s PDF.Js

источник

2017-04-11 11:50:24

pdf.js с выбором текста

ответ

Смежные вопросы