packed installed

src/app/modals/view-media/view-media.module.ts

@@ -9,6 +9,7 @@ import { ViewMediaPageRoutingModule } from './view-media-routing.module';
 import { ViewMediaPage } from './view-media.page';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { PdfViewerModule } from 'ng2-pdf-viewer';
+import { NgxExtendedPdfViewerModule } from 'ngx-extended-pdf-viewer';
 
 @NgModule({
   imports: [
@@ -17,7 +18,8 @@ import { PdfViewerModule } from 'ng2-pdf-viewer';
     IonicModule,
     FontAwesomeModule,
     ViewMediaPageRoutingModule,
-    PdfViewerModule 
+    PdfViewerModule,
+    NgxExtendedPdfViewerModule, 
   ],
   declarations: [ViewMediaPage]
 })

src/app/modals/view-media/view-media.page.html

@@ -24,12 +24,12 @@
               <img src="{{image}}">
             </div>
             <div *ngIf="type == 'application/pdf'">
-              <object [data]="image|safehtml" type="application/pdf" style="width: 400px; height: 500px"></object>
-              <!-- <pdf-viewer [src]="image"
+              
+              <pdf-viewer [src]="base64Sanitize"
               [render-text]="true"
               [original-size]="false"
               style="width: 400px; height: 500px"
-  ></pdf-viewer> -->
+  ></pdf-viewer>
             </div>
           </div>
         </ion-slide>

src/app/modals/view-media/view-media.page.ts

@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { ModalController, NavParams } from '@ionic/angular';
 import { DomSanitizer} from '@angular/platform-browser';
+import { pdfDefaultOptions } from 'ngx-extended-pdf-viewer';
 
 @Component({
   selector: 'app-view-media',
@@ -19,29 +20,55 @@ export class ViewMediaPage implements OnInit {
     maxRation: 2
   };
 
-  base64Sanitize:any = "";
+  base64Sanitize = "";
 
   constructor(
     private modalController: ModalController,
     private navParams:NavParams,
     public sanitizer: DomSanitizer,
+    
   ) {
     this.image = this.navParams.get('image')
     this.type = this.navParams.get('type')
     this.name = this.navParams.get('username')
     this._updatedAt = this.navParams.get('_updatedAt')
+    pdfDefaultOptions.assetsFolder = 'bleeding-edge';
   }
 
   ngOnInit() {
     console.log(this.image)
-      this.base64Sanitize = this.sanitizer.bypassSecurityTrustResourceUrl(eval(this.image));
+      
+
+      const encodedData = btoa(this.image);
+      const blob = new Blob([this.b64toBlob(encodedData)], { type: 'application/pdf' });
+      this.base64Sanitize = URL.createObjectURL(blob);
+      //this.base64Sanitize = this.sanitizer.bypassSecurityTrustResourceUrl(this.base64Sanitize);
+      this.base64Sanitize;
       console.log(this.base64Sanitize)
     
   }
 
-  sanitizeBase64() {
-    return this.sanitizer.bypassSecurityTrustResourceUrl(this.image);
-  }
+  b64toBlob = (b64Data, contentType = '', sliceSize = 512) => {
+    const byteCharacters = atob(b64Data);
+    const byteArrays = [];
+  
+    for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
+      const slice = byteCharacters.slice(offset, offset + sliceSize);
+  
+      const byteNumbers = new Array(slice.length);
+      for (let i = 0; i < slice.length; i++) {
+        byteNumbers[i] = slice.charCodeAt(i);
+      }
+  
+      const byteArray = new Uint8Array(byteNumbers);
+      byteArrays.push(byteArray);
+    }
+  
+    const blob = new Blob(byteArrays, { type: contentType });
+    return blob;
+  };
+  
+