为什么用html预览和打印时pdf不同

Question

[我目前正在尝试从chrome和firefox打印pdf类型的blob，该blob是从我的春季后端服务器api使用jasperreport生成的。一切运行良好，除非pdf非常小，例如此图片的宽度和高度应小于或等于280px。它应该和收据一样宽，但长度很短

但是，单击打印图标后，要打印的内容有所不同，在这些内容中添加了额外的空白，例如这张图片，或者只是在整个A4空白页面的左上方添加了这个小的pdf。

我也在使用Angular和Clarity CSS。这是显示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>

后端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);

Answer 1

[Chrome PDF渲染可能无法识别@media print CSS以外的其他样式。

例如，您可以尝试以下方法：

@media print {
.bootbox-body {
max-width: 300px;
margin: 0 auto;
}
}