Angular: PDF in an iframe wont show if too big

Question

I have a angular webapp which shows and compares pdf files, but when the size of a pdf file is too big (larger than 1,3 MB from my observations) it doesn't show it. I'm using an iframe to show it. The file source is a base64 String (the source is correct, since I tested it in an online base64 to pdf converter and it shows all these files which my app does not).

Here's my code (html component):

<div *ngIf="seite && pdfObj; else loadingPDFs">
  <as-split style="height: 1080px;" direction="horizontal" unit="percent">
    <as-split-area size="50">
      <div class="text-center" style="height: 100vh; padding-left: 0.8em;">
        <span class="badge badge-warning tag">Gemeldete Seite</span>
        <iframe width="100%" height="100%" [src]="seite.inhalt"></iframe>
      </div>
    </as-split-area>
    <as-split-area size="50">
      <div class="text-center" style="height: 100vh; padding-right: 0.8em;">
        <span class="badge badge-success tag center">Original Seite</span>
        <iframe width="100%" height="100%" [src]="pdfObj"></iframe>
      </div>
    </as-split-area>
  </as-split>
</div>
<ng-template #loadingPDFs>
  <mat-spinner></mat-spinner>
</ng-template>

And the code of my ts-component:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Location } from '@angular/common';
import { take } from 'rxjs/operators';
import { DomSanitizer } from '@angular/platform-browser';
// Service Imports
import { SeiteService } from 'app/services/seite.service';
import { BuchService } from 'app/services/buch.service';
// Class Imports
import { Seite } from '../classes/seite';


@Component({
  selector: 'app-seiten-compare',
  templateUrl: './seiten-compare.component.html',
  styleUrls: ['./seiten-compare.component.scss']
})
export class SeitenCompareComponent implements OnInit {

  seite: Seite;
  pdfObj: any;

  constructor(
    private route: ActivatedRoute,
    private location: Location,
    private buchService: BuchService,
    private seiteService: SeiteService,
    private sanitizer: DomSanitizer
  ) { }

  ngOnInit(): void {
    this.getSeite();
  }

  getSeite() {
    this.seiteService.getSeiteByID(parseInt(this.route.snapshot.paramMap.get('id'), 10))
    .pipe(take(1))
    .subscribe(seite => {
      seite.inhalt = this.sanitizer.bypassSecurityTrustResourceUrl('data:application/pdf;base64,' + seite.inhalt);
        this.getPDFSource(seite.outputRoot);
        this.seite = seite;
      });
  }

  getPDFSource(fileAbsolutePath: string): void {
    this.buchService.getPDF(fileAbsolutePath)
    .pipe(take(1))
    .subscribe(source => {
      this.pdfObj = this.sanitizer.bypassSecurityTrustResourceUrl('data:application/pdf;base64,' + source.pdf);
    });
  }
}

As I said, the functions in my services and API return the correct pdf source, as tested online (https://base64.guru/converter/decode/pdf). I checked 60 PDF files and in the app ALL PDFs with a file size of max 1,33MB were shown and all above that did not show in my app.

Does anyone have a solution or idea as to why it's not working? Any help is much appreciated!

Some browsers have a hard limit on URL length, it's possible you are exceeding it. — user2867288, Mar 19 '21 at 19:17
@user2867288 I'm not using URL as source, but a base64 string (data:application/pdf;base64,JVBERi0xLjMKJeLjz9MKNyAwIG9iago8PC9GaWx0ZXIgL0ZsYXRlRGVjb2RlIC9MZW5ndGggOCAwIFI+PgpzdHJlYW0KeJzVW21z28YR/s5fgU8dpTOG7v3F0+mM390kdlxLrZP.... and so on...). — naitunix, Mar 20 '21 at 02:11
Yes, that is called a data URL. You pass it as a URL in this line ``. Setting an iframe src has the same URL length limitations as redirecting to the URL. — user2867288, Mar 20 '21 at 02:25
This may help you https://stackoverflow.com/questions/695151/data-protocol-url-size-limitations — user2867288, Mar 20 '21 at 02:26
Oh I see. Well, that would be really bad. If I console.log() the URL, it does show it correctly and in full length though. Thank you so far, I will see what I can find about URL length limit. — naitunix, Mar 20 '21 at 02:50
@user2867288 Thank you! It looks like u were right. I found this about URI limit of chrome: "In general, the web platform does not have limits on the length of URLs (although 2^31 is a common limit). Chrome limits URLs to a maximum length of 2MB for practical reasons and to avoid causing denial-of-service problems in inter-process communication." The URIs that are not working are indead larger than 2MB. If you post it as an answer, I will mark it as correct. — naitunix, Mar 20 '21 at 02:55

score 1 · Accepted Answer · answered Mar 20 '21 at 03:01

Some browsers have a hard limit on URL length, it's possible you are exceeding it.

You pass the PDF as a data URL in this line <iframe width="100%" height="100%" [src]="pdfObj"></iframe>. Setting an iframe src has the same URL length limitations as redirecting to the URL.

This other question discusses URL length limitations per browser: Data protocol URL size limitations

Angular: PDF in an iframe wont show if too big

1 Answers1