JAVASCRIPT   36

pdf.js

Guest on 10th October 2021 06:49:45 AM

  1. (function ($) {
  2.   Drupal.behaviors.pdf = {
  3.     attach: function(context, settings) {
  4.       $('.pdf-pages', context).each(function(){
  5.         var file = $(this).attr('file');
  6.         var scale = $(this).attr('scale');
  7.         $(this).html('<div id="pdfContainer" class="pdf-content"/>');
  8.  
  9.         function loadPdf(pdfPath) {
  10.             var pdf = PDFJS.getDocument(pdfPath);
  11.             pdf.then(renderPdf);
  12.         }
  13.  
  14.         function renderPdf(pdf) {
  15.             for (var i = 1; i <= pdf.pdfInfo.numPages; i++) {
  16.               pdf.getPage(i).then(renderPage);
  17.             }
  18.         }
  19.         function renderPage(page) {
  20.           var viewport = page.getViewport(scale);
  21.           var $canvas = jQuery("<canvas></canvas>");
  22.  
  23.           // Set the canvas height and width to the height and width of the viewport
  24.           var canvas = $canvas.get(0);
  25.           var context = canvas.getContext("2d");
  26.  
  27.           // The following few lines of code set up scaling on the context if we are on a HiDPI display
  28.           var outputScale = getOutputScale(context);
  29.           canvas.width = (Math.floor(viewport.width) * outputScale.sx) | 0;
  30.           canvas.height = (Math.floor(viewport.height) * outputScale.sy) | 0;
  31.           canvas.style.width = '100%';
  32.           canvas.style.maxWidth = Math.floor(viewport.width) + 'px';
  33.           canvas.style.maxHeight = Math.floor(viewport.height) + 'px';
  34.           // Append the canvas to the pdf container div
  35.           var $pdfContainer = jQuery("#pdfContainer");
  36.           /*
  37.           $pdfContainer.css("height", canvas.style.height)
  38.                        .css("width", canvas.style.width);
  39.           */
  40.           $pdfContainer.append($canvas);
  41.  
  42.           //var canvasOffset = $canvas.offset();
  43.           var $textLayerDiv = jQuery("<div />")
  44.             .addClass("textLayer")
  45.             .css("height", canvas.style.height)
  46.             .css("width", canvas.style.width)
  47.             .offset({
  48.               top: canvas.offsetTop,
  49.               left: canvas.offsetLeft
  50.             });
  51. /*
  52.           context._scaleX = outputScale.sx;
  53.           context._scaleY = outputScale.sy;
  54.           if (outputScale.scaled) {
  55.             context.scale(outputScale.sx, outputScale.sy);
  56.           }
  57. */
  58.           $pdfContainer.append($textLayerDiv);
  59.  
  60.           page.getTextContent().then(function (textContent) {
  61.             /*var textLayer = new TextLayerBuilder({
  62.               textLayerDiv: $textLayerDiv.get(0),
  63.               viewport: viewport,
  64.               pageIndex: 0
  65.             });
  66.             textLayer.setTextContent(textContent);
  67. */
  68.             var renderContext = {
  69.               canvasContext: context,
  70.               viewport: viewport
  71.             };
  72.  
  73.             page.render(renderContext);
  74.           });
  75.         }
  76.  
  77.         loadPdf(file);
  78.  
  79.       });
  80.  
  81.       var canvases = $('canvas.pdf-thumbnail', context);
  82.       Array.prototype.forEach.call(canvases, function(canvas) {
  83.         var file = canvas.attributes.file.value;
  84.         PDFJS.getDocument(file).then(function(pdf) {
  85.           pdf.getPage(1).then(function(page) {
  86.             var scale = (canvas.attributes.scale) ? canvas.attributes.scale.value : 1;
  87.             var viewport = page.getViewport(scale);
  88.             var context = canvas.getContext('2d');
  89.             canvas.height = viewport.height;
  90.             canvas.width = viewport.width;
  91.             var renderContext = {
  92.               canvasContext: context,
  93.               viewport: viewport
  94.             };
  95.             page.render(renderContext);
  96.           });
  97.         });
  98.       });
  99.     }
  100.   };
  101. })(jQuery);

Raw Paste


Login or Register to edit or fork this paste. It's free.