show_pdf.html 2.2 KB

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