html - 为什么在html中预览和打印时pdf不同

Question

我目前正在尝试从 chrome 和 firefox 打印一个类型为 pdf 的 blob，它是使用 jasperreport 从我的 spring 后端服务器 api 生成的。一切都运行完美，除非 pdf 非常小，比如这张图片的宽度和高度应小于或等于 280px。它应该和收据一样宽，但长度很短

但是，在点击打印图标后，打印的内容是不同的，像这张图片那样添加了额外的空白，或者只是将这个小的 pdf 添加到整个空白 A4 页面的左上角。

我也在使用 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

除了 @media print CSS 之外，Chrome PDF 渲染可能无法识别任何其他样式。

例如你可以试试这个:

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