使用 window.print() 为 Safari 打印

Question

我正在尝试打印我的 vue-routes 之一。因此 vue-html-to-paper 不能与 Vue3 一起正常工作。使用 print.js，无法以某种方式包含本地 css 文件。

然后我做了以下基本的 css 打印：

// global printing
@media print {
  @page {
    size: A4;
  }

  // hide buttons and non-content
  button,
  aside {
    display: none !important;
  }

  // somehow there are no line-break, so border content
  div {
    max-width: 100vw;
  }

  // footer
  body::after {
    content: url("../assets/printfooter.png");

    // center
    display: flex;
    justify-content: center;
  }
}

正如我在

上所期望的那样，它工作起来既流畅又简单

Firefox 85.0（64 位）
Chrome 88.0.4324.96（正式版）（64 位）
甚至在我的手机上使用 Chrome 88.0.4324.152

尝试在 Safari 上打印无效。

在桌面版本 14.0.2 上，一半内容超出范围。
在手机上 iPhone 14.4。它只使用半个屏幕。

有什么提示可以让 Apple 满意或者我可以改进什么吗？

Answer 1

我很确定问题出在@page 规则，我的 Safari 不支持它。查看更多： https://developer.mozilla.org/de/docs/Web/CSS/@page

我最终使用 pdfkit 服务器端创建了 pdf。

使用 window.print() 为 Safari 打印

Printing for Safari with window.print()

printing

safari

mobile-safari

vuejs3