1. ev
  2. Soru-cevap
  3. pdf.js

pdf.js

2015-10-11 13 views
7

PDF'de metin nasıl seçilebilir?pdf.js

Burada denediniz. PDF ince yazılı, ancak hiçbir metin seçimi HTML içeriğinde https://github.com/mozilla/pdf.js

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>

kaynak

2015-10-11 clarkk

+0

http://stackoverflow.com/questions/16775907/is-there-a-minimalistic-pdf-js-sample-that-supports-text-selection?rq=1 size yardımcı olmuyor mu? – ChrLipp

+0

denedim .. işe yaramıyor .. bu pdf.js – clarkk

cevap

9

Javascript kodunuz mükemmel. Sadece Metin Katman Oluşturucu bağlıdır UI yardımcı programları dahil etmek gerekir:

<script src="https://raw.githubusercontent.com/mozilla/pdf.js/master/web/ui_utils.js"></script>
sen (ui_utils olmadan) kodunuzu çalıştırırsanız

ve çek:

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

Veya HTML

debug console, , ReferenceError: CustomStyle is not defined göreceksiniz. PDFjs'in repo içindeki A quick search, ui_utils.js içinde tanımlandığını gösterecektir.

Başvuru için benim en küçük ancak tam kodum. PDFjs'in tanıtım pdf here kullanıyorum. Üretim sırasında raw.github'a bağlanmamalısınız.

Ben metni seçip düğüm olmadan pdf.js kullanma konusunda çok yardımcı olmak için bu makaleyi buldum bununla mücadele saat sonra 
<!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>

kaynak

2015-10-15 02:47:18 Sheepy

+0

Bu güzel .. Teşekkürler! : D <3 – clarkk

+0

@clarkk Hangi pdf.js sürümü çalışır? V1.3.91'deki metin vurgulama (çok küçük alanlar) için garip davranışım var. Bu v1.0.277 –

+0

ile çalışmak için kullanılır. Bu artık işe yaramıyor, görünüşe göre şimdi gitmenin yolu tüm görüntüleyiciyi oluşturmaktır. Metin seçimi yeteneği FTW ile basit bir 2kb ~ görüntüleyici istedim – Dan

-1

Merhaba Oluşturduğunuz tuval

edilir.

Tuval, tuval seçimini desteklemeyeceği için tuvali başka bir şekilde değiştirmeniz gerekir.

kaynak

2015-10-13 10:46:28 Mitul

+0

eski bir sürümü olan metin katmanı bir 'tuval' değil ama bir 'div' – clarkk

+1

ama bu '

' – clarkk

İlgili konular

 İlgili konular