Fix

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

@@ -0,0 +1,212 @@
+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();
+  }
+}