Error with Blob inputs fixed

Author: codehippie1

SampleApp/src/app/features/features.component.html

@@ -723,6 +723,44 @@ <h3>On-Demand Actions</h3>
 
                 <mat-divider></mat-divider>
 
+                <h3>PDF Source Type Testing (Issue #283)</h3>
+                <p class="section-description">
+                  Test loading PDFs from different source types: string URL, Blob, or Uint8Array.
+                  This verifies that Issue #283 (Blob loading TypeError) is fixed.
+                </p>
+                <div class="action-buttons">
+                  <button
+                    mat-raised-button
+                    color="accent"
+                    (click)="loadStringPdf()"
+                    [disabled]="currentSourceType === 'string'"
+                  >
+                    <mat-icon>link</mat-icon> Load from String URL
+                  </button>
+                  <button
+                    mat-raised-button
+                    color="accent"
+                    (click)="loadBlobPdf()"
+                    [disabled]="currentSourceType === 'blob'"
+                  >
+                    <mat-icon>code</mat-icon> Load from Blob
+                  </button>
+                  <button
+                    mat-raised-button
+                    color="accent"
+                    (click)="loadUint8ArrayPdf()"
+                    [disabled]="currentSourceType === 'uint8array'"
+                  >
+                    <mat-icon>data_array</mat-icon> Load from Uint8Array
+                  </button>
+                </div>
+                <div class="info-box">
+                  <mat-icon>info</mat-icon>
+                  <span>Current Source Type: <strong>{{ currentSourceType }}</strong></span>
+                </div>
+
+                <mat-divider></mat-divider>
+
                 <h3>Error Handling Demo</h3>
                 <div class="error-config">
                   <mat-form-field class="full-width">

SampleApp/src/app/features/features.component.ts

@@ -40,7 +40,7 @@ export class FeaturesComponent implements OnInit {
   interactiveErrorTpl!: TemplateRef<any>;
 
   // Configuration properties - directly bound to the viewer
-  public pdfSrc = "/assets/pdfjs/web/compressed.tracemonkey-pldi-09.pdf";
+  public pdfSrc: string | Blob | Uint8Array = "/assets/pdfjs/web/compressed.tracemonkey-pldi-09.pdf";
   public downloadFileName = "sample-document.pdf";
   public diagnosticLogs = false;
 
@@ -515,6 +515,43 @@ export class FeaturesComponent implements OnInit {
     }
   }
 
+  // Test Blob and Uint8Array loading (Issue #283)
+  public currentSourceType: 'string' | 'blob' | 'uint8array' = 'string';
+  
+  public async loadBlobPdf() {
+    try {
+      console.log("🧪 Testing Blob pdfSrc loading...");
+      const response = await fetch('/assets/pdfjs/web/compressed.tracemonkey-pldi-09.pdf');
+      const blob = await response.blob();
+      this.pdfSrc = blob;
+      this.currentSourceType = 'blob';
+      console.log("✅ Blob pdfSrc set successfully:", blob);
+    } catch (error) {
+      console.error("❌ Blob loading failed:", error);
+    }
+  }
+  
+  public async loadUint8ArrayPdf() {
+    try {
+      console.log("🧪 Testing Uint8Array pdfSrc loading...");
+      const response = await fetch('/assets/pdfjs/web/compressed.tracemonkey-pldi-09.pdf');
+      const arrayBuffer = await response.arrayBuffer();
+      const uint8Array = new Uint8Array(arrayBuffer);
+      this.pdfSrc = uint8Array;
+      this.currentSourceType = 'uint8array';
+      console.log("✅ Uint8Array pdfSrc set successfully:", uint8Array);
+    } catch (error) {
+      console.error("❌ Uint8Array loading failed:", error);
+    }
+  }
+  
+  public loadStringPdf() {
+    console.log("🧪 Testing string pdfSrc loading...");
+    this.pdfSrc = "/assets/pdfjs/web/compressed.tracemonkey-pldi-09.pdf";
+    this.currentSourceType = 'string';
+    console.log("✅ String pdfSrc set successfully");
+  }
+
   // Convenience setter demonstrations
   public useTraditionalApproach = true;
 

docs-website/docs/getting-started.md

@@ -48,6 +48,8 @@ export class AppModule { }
 </ng2-pdfjs-viewer>
 ```
 
+The `pdfSrc` property accepts URLs (strings), Blob objects, or Uint8Array byte arrays.
+
 ### Step 4: Add a PDF File
 
 Place a PDF file in your `src/assets/` folder (e.g., `sample.pdf`).

docs-website/docs/intro.md

@@ -55,6 +55,8 @@ export class AppModule {}
 </ng2-pdfjs-viewer>
 ```
 
+The `pdfSrc` property accepts URLs (strings), Blob objects, or Uint8Array byte arrays.
+
 That's it! Your PDF viewer is ready to use.
 
 ## Why the Rewrite?

lib/src/ng2-pdfjs-viewer.component.ts

@@ -732,20 +732,36 @@ export class PdfJsViewerComponent
     // Set up PostMessage listener
     this.setupMessageListener();
 
-    // Load PDF for embedded views.
-    if (!this.externalWindow) {
-      this.loadPdf();
-    }
+    // Note: PDF loading moved to ngAfterViewInit() to ensure iframe is ready
+    // This prevents "Cannot read properties of null (reading 'location')" error
+    // when pdfSrc is a Blob (Issue #283)
 
     // Bind events.
     this.bindToPdfJsEventBus();
   }
 
   ngAfterViewInit(): void {
-    // Minimal initialization - rely on event-driven readiness notifications
+    // Load PDF after view is initialized - trust Angular's lifecycle guarantee
+    // that iframe.nativeElement.contentWindow is now available
+    if (!this.externalWindow) {
+      this.loadPdf();
+    }
   }
 
   ngOnChanges(changes: SimpleChanges): void {
+    // Handle pdfSrc changes - reload the PDF (Issue #283)
+    // Trust Angular's change detection event to trigger reload when needed
+    if (changes['pdfSrc'] && !changes['pdfSrc'].firstChange) {
+      // pdfSrc changed after initialization - reload the PDF
+      if (!this.externalWindow) {
+        // Reset configuration queuing since iframe will reload fresh
+        this.initialConfigQueued = false;
+        this.isPostMessageReady = false;
+        this.loadPdf();
+      }
+      return; // pdfSrc change requires full reload, skip other change processing
+    }
+    
     if (this.PDFViewerApplication) {
       // Only apply changes if PostMessage API is ready and viewer is initialized
       if (this.isPostMessageReady && this.PDFViewerApplication.initialized) {