doneit-web/src/app/modals/document-viewer/document-viewer.page.ts

import { Component, OnInit } from '@angular/core';
import { ModalController, NavParams } from '@ionic/angular';
import { ProcessesService } from 'src/app/services/processes.service';


@Component({
  selector: 'app-document-viewer',
  templateUrl: './document-viewer.page.html',
  styleUrls: ['./document-viewer.page.scss'],
})
export class DocumentViewerPage implements OnInit {

  pdfSrc = 'http://laptop-46/FileShare/Test_25MB.pdf';
  task = null
  DocId = null
  fileName = ''
  link = ''

  constructor(
    private modalController: ModalController,
    private navParams: NavParams,
    private processes: ProcessesService) {
      
      this.task = this.navParams.get('task') || null;
      this.DocId = this.navParams.get('DocId');

      if(this.navParams.get('pdfSrc')) {
        this.pdfSrc = this.navParams.get('pdfSrc') || null;
      }

      
    }
  
  ngOnInit() {

    this.processes.getFileBase64(this.DocId).subscribe((res: any) => {
      
      console.log(res)
      this.pdfSrc= 'data:application/pdf;base64,'+ res.file
      this.fileName = res.name

    })

    // this.setPdfViewer()


    // setTimeout(() => {
      
    //   document.getElementById('iframe')['contentWindow'].postMessage(
    //     {
    //       sender: "get_page_button1",
    //       message: 'url'
    //   }, "*")

    // }, 3000)

  }


  setPdfViewer() {
    setTimeout( async () => {
        
      // If absolute URL from the remote server is provided, configure the CORS
      // header on that server.
      var url = 'http://192.168.0.87:3000/000634977.pdf';

      const pdfjsWorker = await import('pdfjs-dist/build/pdf.worker.entry');
      // Loaded via <script> tag, create shortcut to access PDF.js exports.
      var pdfjsLib = await import('pdfjs-dist/build/pdf');

      // The workerSrc property shall be specified.
      // pdfjsLib.GlobalWorkerOptions.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.js';
      pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorker;

      var pdfDoc = null,
        pageNum = 1,
        pageRendering = false,
        pageNumPending = null,
        scale = 0.8,
        canvas: any = document.getElementById('the-canvas'),
        ctx = canvas.getContext('2d');

      /**
       * Get page info from document, resize canvas accordingly, and render page.
       * @param num Page number.
       */
      function renderPage(num) {
        pageRendering = true;
        // Using promise to fetch the page
        pdfDoc.getPage(num).then(function(page) {
          var viewport = page.getViewport({scale: scale});
          canvas.height = viewport.height;
          canvas.width = viewport.width;

          // Render PDF page into canvas context
          var renderContext = {
            canvasContext: ctx,
            viewport: viewport
          };
          var renderTask = page.render(renderContext);

          // Wait for rendering to finish
          renderTask.promise.then(function() {
            pageRendering = false;
            if (pageNumPending !== null) {
              // New page rendering is pending
              renderPage(pageNumPending);
              pageNumPending = null;
            }
          });
        });

        // Update page counters
        // document.getElementById('page_num').textContent = num;
      }

      /**
       * If another page rendering in progress, waits until the rendering is
       * finised. Otherwise, executes rendering immediately.
       */
      function queueRenderPage(num) {
        if (pageRendering) {
          pageNumPending = num;
        } else {
          renderPage(num);
        }
      }

      /**
       * Displays previous page.
       */
      function onPrevPage() {
        if (pageNum <= 1) {
          return;
        }
        pageNum--;
        queueRenderPage(pageNum);
      }

      document.getElementById('prev').addEventListener('click', onPrevPage);

      /**
       * Displays next page.
       */
      function onNextPage() {
        if (pageNum >= pdfDoc.numPages) {
          return;
        }
        pageNum++;
        queueRenderPage(pageNum);
      }

      document.getElementById('next').addEventListener('click', onNextPage);

      var currPage = 1; //Pages are 1-based not 0-based
      var numPages = 0;
      var thePDF = null;


      function handlePages(page)
      {
          //This gives us the page's dimensions at full scale
          var viewport = page.getViewport( 1 );

          //We'll create a canvas for each page to draw it on
          var canvas = document.createElement( "canvas" );
          canvas.style.display = "block";
          var context = canvas.getContext('2d');
          canvas.height = viewport.height;
          canvas.width = viewport.width;

          //Draw it on the canvas
          page.render({canvasContext: context, viewport: viewport});

          //Add it to the web page
          document.querySelector('#pdf-container').appendChild( canvas );

          //Move to next page
          currPage++;
          if ( thePDF !== null && currPage <= numPages )
          {
              thePDF.getPage( currPage ).then( handlePages );
          }
      }

      /**
       * Asynchronously downloads PDF.
       */        
      pdfjsLib.getDocument(url).promise.then(function(pdfDoc_) {

          pdfDoc = pdfDoc_;
          thePDF = pdfDoc_

          pdfDoc.getPage(1).then(function(page) {
            // you can now use *page* here
            // alert('first page')
          });

          // Initial/first page rendering
          renderPage(pageNum);

          numPages  = pdfDoc.numPages;
          pdfDoc.getPage( 1 ).then( handlePages );
        });

    }, 100)
  }

  close() {
    this.modalController.dismiss();
  }
}