show_pdf.html 2.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
  1. <!DOCTYPE html><meta charset="utf-8">
  2. <link rel="stylesheet" href="{{ url_for('static', filename='css/text_layer_builder.css') }}" />
  3. <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  4. <!--
  5. <script src="//mozilla.github.io/pdf.js/build/pdf.js"></script>
  6. -->
  7. <!-- <script src="https://mozilla.github.io/pdf.js/build/pdf.js"></script>das funktioniert!!!!!
  8. <script type="javascript" src="{{ url_for('static', filename='js/pdf.js') }}"></script>-->
  9. <script type="javascript" src="https://unpkg.com/pdfjs-dist@latest/build/pdf.js" ></script>
  10. https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.3.200/pdf.js
  11. <script type="javascript" src="{{ url_for('static', filename='js/text_layer_builder.js') }}"></script>
  12. <script type="javascript" src="{{ url_for('static', filename='js/ui_utils.js') }}"></script>
  13. <body>
  14. <canvas id="the-canvas"></canvas>
  15. <script>
  16. var url = "{{ url_for('send_file', filename=og_filename) }}";
  17. var pdfjsLib = window['pdfjs-dist/build/pdf'];
  18. pdfjsLib.disableWorker = true;
  19. pdfjsLib.getDocument(url).then(function(pdf){
  20. var page_num = 1;
  21. pdf.getPage(page_num).then(function(page){
  22. var scale = 1.5;
  23. var viewport = page.getViewport(scale);
  24. var canvas = $('#the-canvas')[0];
  25. var context = canvas.getContext('2d');
  26. canvas.height = viewport.height;
  27. canvas.width = viewport.width;
  28. var canvasOffset = $(canvas).offset();
  29. var $textLayerDiv = $('#text-layer').css({
  30. height : viewport.height+'px',
  31. width : viewport.width+'px',
  32. top : canvasOffset.top,
  33. left : canvasOffset.left
  34. });
  35. page.render({
  36. canvasContext : context,
  37. viewport : viewport
  38. });
  39. page.getTextContent().then(function(textContent){
  40. console.log( textContent );
  41. var textLayer = new TextLayerBuilder({
  42. textLayerDiv : $textLayerDiv.get(0),
  43. pageIndex : page_num - 1,
  44. viewport : viewport
  45. });
  46. textLayer.setTextContent(textContent);
  47. textLayer.render();
  48. });
  49. });
  50. });
  51. </script>
  52. </body>
  53. </html>