Unable to Display Base64 Encoded PDF in iframe Using PSPDFKit

Question

I'm trying to display a PDF file encoded as base64 in an iframe using PSPDFKit, but I'm encountering issues with the display. Here's what I've tried:

Problem: I have a PDF file that is encoded as base64. I'm trying to display this PDF in an iframe using PSPDFKit. However, the PDF does not render properly, and I'm unable to view its contents.

Additional Information:

I'm using Angular for the frontend. I've verified that the base64-encoded string is correct and contains the PDF data. I've tried different PDF files and encoding methods, but the issue persists. I've also tried using different iframe attributes and configurations, but none of them seem to resolve the problem.

this my back code :

@PostMapping("/data")
    public ResponseEntity<List<ResponseData>> fetchAbbyyData(@RequestParam("images") MultipartFile[] images,
            @RequestParam("projectPath") String projectPath) {

        List<ResponseData> list = new ArrayList<ResponseData>();

        try {
            // Process images and get JSON data
            //String jsonData = imageProcessingService.processImagesAndGetJsonData(images, projectPath);

            for (MultipartFile image : images) {

                // Generate PDF file bytes
                
                
                File file = new File(imageProcessingService.convertImagesToPDF(image));
                byte[] bytes = Files.readAllBytes(file.toPath());

                String b64 = Base64.getEncoder().encodeToString(bytes);

                
                
                // Create custom response object with JSON data and PDF bytes
                ResponseData responseData = new ResponseData("sssz", b64);
                list.add(responseData);
            }

            // Return ResponseEntity with custom response object and OK status
            return ResponseEntity.ok(list);
        } catch (ImageProcessingException ex) {
            // Return ResponseEntity with error message and internal server error status
            return ResponseEntity.status(HttpStatus.NOT_MODIFIED).body(null);
        } catch (Exception e) {
            // TODO Auto-generated catch block
            return ResponseEntity.status(HttpStatus.NOT_FOUND).body(null);
        }
    }

and this is my front-end code :

onSubmit() {
    this.loading = true;
    const formData = new FormData();
    for (const file of this.selectedFiles) {
      formData.append('images', file);
    }
    formData.append('projectPath', 'SampleProjects/Hello/SampleProject/SampleProject.fcproj');
    this.uploadService.uploadImages(formData).subscribe(
      response => {
        this.loading = false;
        this.responseData = response;
        console.log(JSON.stringify(this.responseData));


 
        // Decode base64 encoded PDF data
        const decodedPdfData = this.uploadService.decodeBase64ToPdf(this.responseData.pdfData);

        // Set pdfUrl with decoded PDF data
        this.pdfUrl = 'data:application/pdf;base64,' + decodedPdfData;

        this.processingCompleted = true;
      },
      error => {
        this.loading = false;
        console.error('Error:', error);
      }
    );
  }


  ngAfterViewInit() {


    PSPDFKit.load({
      // Use the assets directory URL as a base URL. PSPDFKit will download its library assets from here.
      baseUrl: location.protocol + '//' + location.host + '/assets/',
      // Specify the decoded PDF data
      document: 'data:application/pdf;base64,' + this.pdfUrl,
      container: '#pspdfkit-container',
    }).then((instance) => {
      // Store the PSPDFKit for Web instance
      (window as any).instance = instance;
    });
  }

servcie function :

  decodeBase64ToPdf(base64String: string): string {
    return atob(base64String);
  }

html code :

            <div id="pspdfkit-container" ></div>

            <div *ngIf="pdfUrl">
              <iframe [src]="pdfUrl" width="100%" height="500px"></iframe>
            </div>

the console show in first this error : ERROR PSPDFKitError: Configuration#container must either be a valid element or a CSS selector