Why pdf is different when previewing and printing in html

I am currently trying to print a blob with type pdf from chrome and firefox which is generated from my spring backend server api using jasperreport. Everything run perfectly find except when the pdf is really small like this picture width and height should be less than or equal to 280px. It is suppose to be as wide as a receipt but very short in length

But, after clicking the print icon, the content being printed is different where extra white spaces are added like this picture or just adding this small pdf to the top left of a whole blank A4 page.

I am also using Angular and Clarity CSS. Here is the code to display the blob: preview.ts

export class PdfPreviewComponent implements OnInit {

  @Input()
  title = '';

  previewUrl: string;
  open = false;
  safeUrl: SafeUrl;

  patientCode = false;

  @ViewChild('modalPreview')
  private modalPreview: ClrModal;

  constructor(private sanitizer: DomSanitizer) { }

  ngOnInit() {
    this.modalPreview._openChanged.subscribe(
      event => {
        this.open = event;
      }
    );
  }

  preview() {
     let url;
this.someService.print().subscribe(result => {
      url = URL.createObjectURL(result);
    });
    this.previewUrl = encodeURI(url);
    this.safeUrl = this.sanitizer.bypassSecurityTrustResourceUrl(this.previewUrl);
    this.open = true;
  }

preview.html

<clr-modal #modalPreview [(clrModalOpen)]="open" [clrModalSize]="'lg'" class="vertical-top">
  <h4 class="modal-title">{{title}}</h4>
  <div class="modal-body">
    <div class="bootbox-body">
      <div class="clr-row mt5">
        <iframe class="e2e-iframe-trusted-src" style="height: 85vh; width: 100%;" [src]="safeUrl"></iframe>
      </div>
    </div>
  </div>
</clr-modal>

backend api

    MultipartFile pdf = consumerBusiness.exportCode(name, code);
    if (pdf != null) {
      ByteArrayResource resource = new ByteArrayResource(pdf.getBytes());
      HttpHeaders header = new HttpHeaders();
      header.add(HttpHeaders.CONTENT_DISPOSITION, "inline; filename=" + pdf.getOriginalFilename());
      header.add("Cache-Control", "no-cache, no-store, must-revalidate");
      header.add("Pragma", "no-cache");
      header.add("Expires", "0");
      return ResponseEntity.ok()
          .headers(header)
          .contentLength(resource.contentLength())
          .contentType(MediaType.parseMediaType("application/pdf"))
          .body(resource);
    }
    return new ResponseEntity(HttpStatus.OK);