pdf.js z wyborem tekstu

Jak ustawić tekst w pliku PDF do wybrania?pdf.js z wyborem tekstu

Próbowałem tutaj. PDF jest napisane poprawnie, ale brak wyboru tekst

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>

Źródło

2015-10-11 clarkk

http://stackoverflow.com/questions/16775907/is-there-a-minimalistic-pdf-js-sample-to-supports-text-selection?rq=1 nie pomaga? – ChrLipp

próbowałem go .. nie mogę go uruchomić .. jest to starsza wersja pliku pdf.js – clarkk

Twój kod javascript jest doskonały. Wystarczy włączyć narzędzi UI, że warstwę tekstową Builder zależy od:

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

Albo w HTML:

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

Jeśli prowadzisz swój kod (bez ui_utils) i sprawdzić debug console, zobaczysz ReferenceError: CustomStyle is not defined. A quick search w pliku PDFs pod numerem repo pokaże, że jest zdefiniowany w pliku ui_utils.js.

Oto mój minimalny, ale kompletny kod w celach informacyjnych. Używam wersji demonstracyjnej PDFjs pdf here. Pamiętaj, że w produkcji nie powinieneś łączyć się z raw.gitub.

<!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>

Źródło

2015-10-15 02:47:18 Sheepy

To jest piękne .. Dzięki! : D <3 – clarkk

@clarkk Która wersja 'pdf.js' działa? Mam dziwne zachowanie dla podświetlania tekstu (zbyt małe obszary) w wersji 1.3.91. Kiedyś pracował z wersją 1.0.277 –

To już nie działa, najwyraźniej teraz należy zbudować całą przeglądarkę Chcę mieć prostą przeglądarkę 2kb ~ z możliwością wyboru tekstu FTW – Dan

-1

Witam utworzeniu płótno w treści HTML.

Obszar Canvas nie obsługuje zaznaczania tekstu, więc musisz zmienić płótno w inny sposób.

Źródło

2015-10-13 10:46:28 Mitul

warstwa tekstowa nie jest 'canvas' ale jest' div' – clarkk

ale jest '

' – clarkk

Po godzinach zmagań z tym artykułem znalazłem bardzo pomocny w wyborze tekstu i korzystaniu z pdf.js bez węzła. Custom PDF Rendering in JavaScript with Mozilla’s PDF.Js

Źródło

2017-04-11 11:50:24

pdf.js z wyborem tekstu

Odpowiedz

Powiązane problemy