pdf.js

पीडीएफ में पाठ को कैसे चुनने योग्य बनाने के लिए?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>

स्रोत

2015-10-11 clarkk

http://stackoverflow.com/questions/16775907/is-there-a-minimalistic-pdf-js- नमूना-that-supports-text-selection?rq=1 आपकी मदद नहीं करता है? – ChrLipp

ने इसे आजमाया है .. इसे काम नहीं कर सकता .. यह pdf.js – clarkk

आपका जावास्क्रिप्ट कोड सही है। तुम बस यूआई उपयोगिताओं कि पाठ परत बिल्डर पर निर्भर करता है को शामिल करना होगा:

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 देखेंगे। पीडीजेजे के repo में quick search आपको दिखाएगा कि यह ui_utils.js में परिभाषित है।

यहां आपके संदर्भ के लिए मेरा न्यूनतम लेकिन पूरा कोड है। मैं पीडीएफजे के डेमो पीडीएफ 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

यह सुंदर है .. धन्यवाद! : डी <3 – clarkk

@clarkk 'pdf.js' का कौन सा संस्करण इसके लिए काम करता है? V1.3.91 में टेक्स्ट हाइलाइटिंग (बहुत छोटे क्षेत्रों) के लिए मेरे पास अजीब व्यवहार है। यह v1.0.277 –

के साथ काम करता था, यह अब और काम नहीं करता है, स्पष्ट रूप से अब जाने का तरीका पूरे दर्शक को बनाना है, मैं टेक्स्ट चयन क्षमता एफटीडब्ल्यू के साथ एक साधारण 2 केबी ~ दर्शक चाहता था – Dan

-1

नमस्ते आपके द्वारा बनाए गए कैनवास अपने HTML सामग्री में।

कैनवास टेक्स्ट चयन का समर्थन नहीं करेगा, इसलिए आपको कैनवास को किसी अन्य तरीके से बदलने की आवश्यकता है।

स्रोत

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

उत्तर

संबंधित मुद्दे