bscheibel
/
ui


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114
							<!DOCTYPE html><meta charset="utf-8"/>

<!--<script type="javascript" src="//cdnjs.cloudflare.com/ajax/libs/pdf.js/2.3.200/pdf.js"></script> das funktioniert!!!!!
<script type="javascript" src="https://unpkg.com/pdfjs-dist@latest/build/pdf.js" ></script>
<script type="javascript" src="{{ url_for('static', filename='js/pdf.js') }}"></script>
<script src="//mozilla.github.io/pdf.js/build/pdf.js"></script>
<script src="https://mozilla.github.io/pdf.js/build/pdf.js"></script>
-->

<script src="https://cdn.jsdelivr.net/npm/pdfjs-dist@1.9/build/pdf.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/pdfjs-dist@1.9/web/pdf_viewer.js"></script>
<script src="https://cdn.jsdelivr.net/npm/pdfjs-dist@1.9/build/pdf.js"></script>
<script type="javascript" src="{{ url_for('static', filename='js/text_layer_builder.js') }}"></script>
<script type="javascript" src="{{ url_for('static', filename='js/ui_utils.js') }}"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pdfjs-dist@2.2.228/web/pdf_viewer.css">
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}"/>
<link rel="stylesheet" href="{{ url_for('static', filename='css/text_layer_builder.css') }}" />


<body>
<div id="container" > {{og_filename}}</div>
<div id="text-layer"></div>
<script>


var og_filename = "{{og_filename}}";
var url = "{{ url_for('send_file', filename=og_filename) }}";
console.log(og_filename);

var pdfjsLib = window['pdfjs-dist/build/pdf'];

pdfjsLib.getDocument(url)
  .promise.then(function(pdf) {

    // Get div#container and cache it for later use
    var container = document.getElementById("container");

    // Loop from 1 to total_number_of_pages in PDF document
    for (var i = 1; i <= pdf.numPages; i++) {

        // Get desired page
        pdf.getPage(i).then(function(page) {

          var scale = 1.5;
          var viewport = page.getViewport({scale: scale});
          var div = document.createElement("div");

          // Set id attribute with page-#{pdf_page_number} format
          div.setAttribute("id", "page-" + (page.pageIndex + 1));

          // This will keep positions of child elements as per our needs
          div.setAttribute("style", "position: relative");

          // Append div within div#container
          container.appendChild(div);

          // Create a new Canvas element
          var canvas = document.createElement("canvas");

          // Append Canvas within div#page-#{pdf_page_number}
          div.appendChild(canvas);

          var context = canvas.getContext('2d');
          canvas.height = viewport.height;
          canvas.width = viewport.width;

          var renderContext = {
            canvasContext: context,
            viewport: viewport
          };

          // Render PDF page
         page.render(renderContext).promise.then(function() {
    // Returns a promise, on resolving it will return text contents of the page
    return page.getTextContent();
}).then(function(textContent) {
     // PDF canvas
    var pdf_canvas = $("#canvas");

    // Canvas offset
    var canvas_offset = pdf_canvas.offset();

    // Canvas height
    var canvas_height =  canvas.height;

    // Canvas width
    var canvas_width = canvas.width;

    // Assign CSS to the text-layer element
    $("#text-layer").css({ left: canvas_offset.left + 'px', top: canvas_offset.top + 'px', height: canvas_height + 'px', width: canvas_width + 'px' });

    // Pass the data to the method for rendering of text over the pdf canvas.
    PDFJS.renderTextLayer({
        textContent: textContent,
        container: $("#text-layer").get(0),
        viewport: viewport,
        textDivs: []
    });
});


        });

    }

});


</script>
</body>
</html>