pdf.js con selezione testo

Come rendere selezionabile il testo in un PDF?pdf.js con selezione testo

Hanno provato qui. Il PDF è scritto bene, ma non la selezione del testo

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>

fonte

2015-10-11 clarkk

http://stackoverflow.com/questions/16775907/is-there-a-minimalistic-pdf-js-sample-that-supports-text-selection?rq=1 non ti aiuta? – ChrLipp

averlo provato .. non posso farlo funzionare .. questa è una versione precedente di pdf.js – clarkk

Il tuo codice javascript è perfetto. Hai solo bisogno di includere le utilità dell'interfaccia utente che livello di testo Builder dipende:

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

O in HTML:

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

Se si esegue il codice (senza ui_utils) e controllo il debug console, vedrete ReferenceError: CustomStyle is not defined. A quick search in PDFjs repo mostrerà che è definito in ui_utils.js.

Ecco il mio codice minimo ma completo per il vostro riferimento. Sto usando la demo di PDFjs pdf here. Si noti che in produzione non si dovrebbe collegare a 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>

fonte

2015-10-15 02:47:18 Sheepy

Questo è bello .. Grazie! : D <3 – clarkk

@clarkk Quale versione di 'pdf.js' funziona? Ho uno strano comportamento per l'evidenziazione del testo (aree troppo piccole) nella v1.3.91. Funzionava con v1.0.277 –

Questo non funziona più, a quanto pare la strada da fare ora è costruire l'intero visualizzatore Volevo un semplice visualizzatore 2kb ~ con funzionalità di selezione del testo FTW – Dan

-1

tela Ciao è stato creato nel contenuto HTML.

Canvas non supporta la selezione del testo, quindi è necessario cambiare la tela in un altro modo.

fonte

2015-10-13 10:46:28 Mitul

il livello di testo non è un 'canvas' ma è un' div' – clarkk

ma è '

' – clarkk

Dopo ore di lotta con questo ho trovato questo articolo per essere molto utile sulla selezione di testo e l'utilizzo pdf.js senza nodo. Custom PDF Rendering in JavaScript with Mozilla’s PDF.Js

fonte

2017-04-11 11:50:24

risposta

Problemi correlati